HTML5 Canvas ImageData分配行爲怪異

我想不通爲什麼這不起作用。我在畫布上繪製圖像，使用getImageData，處理像素，然後存儲該像素數組。當我準備好稍後繪製這些像素時，我在另一個尺寸相同的畫布上使用createImageData，將生成的ImageData對象的data屬性設置爲我保存的像素數組，然後調用putImageData。結果：保存的數組數據未分配給ImageData對象。下面是一個測試頁面代碼：HTML5 Canvas ImageData分配行爲怪異

<!DOCTYPE html> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en-US' lang='en-US'> 
<head> 
<meta http-equiv='content-type' content='text/html;charset=UTF-8' /> 
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script> 
<title>Audio Browser</title> 
</head> 
<body> 

<script type='text/javascript'> 
$(document).ready(function() 
{ 
    var copy = document.createElement('canvas'); 
    var viewer = $('#viewer')[0]; 
    var output = $('#output')[0]; 
    var ctx = viewer.getContext('2d'); 
    var outputContext = output.getContext('2d'); 
    var img = $('#input')[0]; 
    var imageData; 
    var songs = []; 

    output.width = copy.width = img.width; 
    output.height = copy.height = img.height; 
    copy.getContext('2d').drawImage(img, 0, 0); 

    viewer.width = 1500; 
    viewer.height = 800; 

    originalData = copy.getContext('2d').getImageData(0, 0, copy.width, copy.height); 
    imageData = originalData.data; 

    for(var i = 3; i < imageData.length; i+=4) 
    { 
    var row = Math.floor(i/copy.width/4); 

    imageData[i] *= 1-((copy.height - row)/copy.height*2); 
    } 

    songs.push({'fadeImg' : imageData}); 


    draw(); 

    function draw() 
    { 
    originalData = copy.getContext('2d').createImageData(copy.width, copy.height); 

    originalData.data = songs[0].fadeImg; 

    outputContext.putImageData(originalData, 0, 0); 
    } 
}); 

</script> 

<img id='input' src='albumArt/small.png' /> 
<canvas id='output'></canvas> 
<br /> 
<canvas id='viewer'></canvas> 
</body> 
</html>

編輯：

我剛發現一些有趣的事情在新的IE9測試版嘗試這種時候。在IE中，我收到以下錯誤：SCRIPT65535: Invalid set operation on read-only property on originalData.data = songs[0].fadeImg;我之前檢查過Firefox，並且在錯誤控制檯中沒有錯誤。也許Firefox只是默默地失敗。如果是這樣的話，我怎樣才能將數組複製回來，而不會浪費太多的循環？

來源

2010-09-18 Telanor

現在正在進行調試，通過查看代碼我可以看出的一點是，img.width和img.height最有可能是'0'，因爲文檔就緒不會等待圖像加載，你應該把所有的代碼附加到圖像'onload'事件。 – 2010-09-18 08:19:44

如果您使用getImageData而不是createImageData，則會看到結果是原始副本，所以問題不在此處。在我的實際代碼中，它確實等待圖像加載事件。 – Telanor 2010-09-18 08:29:03

我最近遇到了這個問題。

不幸的是，似乎直接分配數據是不可能的，因爲它是一個Uint8ClampedArray。

根據Kronos.com：

It behaves identically to the other typed array views, except that the setters and constructor use clamping [WEBIDL] rather than modulo arithmetic when converting incoming number values.

因此，一個循環是要走的路... 這應該做到：

for (var i in songs[0].fadeImg){ 
    originalData.data[i] = songs[0].fadeImg[i]; 
}

這是非常不方便的，但是這是唯一的方式，我已經發現。

來源

2013-01-08 19:41:22 TheCrzyMan

HTML5 Canvas ImageData分配行爲怪異

回答

相關問題