HTML5 getImageData然後putImageData導致褪色圖像

我很新的HTML5和我想知道，如果有人可以提供一些線索這光：HTML5 getImageData然後putImageData導致褪色圖像

<script type="text/javascript"> 
     window.onload = function() { 

      var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas 
      var context = canvas.getContext('2d'); 

      var image = new Image(); 
      image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image 
      image.onload = function() { context.drawImage(image, 0, 0); drawFrame(); }; 

      function drawFrame() { 

       window.requestAnimationFrame(drawFrame, canvas); 

       imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

       //Do something to some pixels here that persists over time 

       context.clearRect(0, 0, canvas.width, canvas.height); 

       context.putImageData(imageData, 0, 0); 
      }; 

     }; 
</script>

據我有限的HTML5知識這段代碼應該什麼都不做除了不斷顯示「圖像」。但相反，圖像相當迅速地變成幾乎白色，這表明imageData在每次從畫布中讀取或寫入畫布時都會稍微變化...

基本上我想淡出鼠標所在的圖像以便在鼠標移動時顯示背景圖像。有沒有辦法解決這個問題，或者我將不得不在這個過程中變得更有創意？無論如何，我可以操縱「圖像」ImageData，而不是每次都從畫布中獲取它。

在此先感謝，我試過使用jpg和png並加載到DOM而不是通過image.src，但他們都有相同的問題。

使用最新的Chrome btw。

這裏是設置爲requestionAnimationFrame以處理各種與瀏覽器的故障轉移到的setTimeout：

(!window.requestAnimationFrame) 
{ 
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function (callback) { 
         return window.setTimeout(callback, 1000/60); 
        }); 
}

下面是畫布

<canvas id="canvas" width="682" height="111"></canvas>

代碼這就是全部的代碼這個。

來源

2012-06-06 Rob

putImageData（）和getImageData（）可能是有損的。有一個音符the spec這一點：

由於轉換和預乘alpha 顏色值，剛纔已經使用putImageData（）可能會返回爲等效getImageData設定像素的有損性質（）作爲不同的價值。

來源

2012-09-23 04:30:24

-1

requestAnimationFrame是一個實驗性功能（2012年6月），它使用基於時間的幀訪問。這是爲了避免動畫延遲。我建議你看看這個Moz article。

來源

2012-06-09 12:18:15

如果你看過我提供你可能已經注意到您丟失的幀指針的文章。 –

我不會錯過幀指針，因爲我說window.requestAnimationFrame中沒有包含在上面的代碼中，因爲我不相信它是相關的。這不是一個延遲問題 - 讀我遇到的症狀 - 我有一些複雜的粒子動畫運行這個非常相同的代碼，他們完美運行 - 這是與getImageData和putImageData之間的圖像數據更改我想相信。請注意，我說「這段代碼不應該做任何事情！」（如果它工作正常），那麼爲什麼圖像會隨着時間迅速退化？ – Rob

@Rob，我無法在FF14.0上重新創建問題，你能擺弄實際的代碼嗎？和你使用的是什麼瀏覽器？我注意到我的一個png文件有一個小故障。也許值得一試不同的形象！ –

我曾嘗試也是在在IM這適用於我的比賽要操縱選擇的像素有效果，但它並沒有給我預期的結果

這裏是一些示例代碼，我用來操縱像素改變

獲取的圖像信息，並存儲

var img = context.getImageData(0,0, width, height) 
var imgdata = img.data 
var len = imgdata.length

循環來的所有數據和操縱像素信息

var i = 0; 

for(i; i<leng; i++) { 
    var red = imgdata[i] 
    var green = imgadata[i+1] 
    var blue = imgdata[i+2] 
    var alpha = imgdata[i+3] 

    imgdata[i] = new value 
    imgdata[i+1] = new value 
    imgdata[i+2] = new value 
    imgdata[i+3] = new value 
}

上下文。putImageData（IMG，0,0）

然後創建動畫幀見成效

來源

2014-09-24 05:15:24

HTML5 getImageData然後putImageData導致褪色圖像

回答

相關問題