的ImageData數據分配

比方說，我有這樣的PoC代碼段用於canvas原始像素數據的ImageData數據分配

(function(){ 
    'use strict'; 
    var img = document.createElement("canvas").getContext("2d").getImageData(0, 0, 1, 1); 
    var imgData = img.data; 
    img.data = imgData; 
})();

問題的工作是，我得到一個合理的錯誤（我已經在最新的Chrome檢查， FF）

TypeError: Cannot assign to read only property 'data' of #<ImageData>

所以，我可以禁用嚴格模式，一切都會變得完美，但有嚴格模式來實現這個可能？也許我只是沒有找到關於setter的文檔data？

謝謝！

來源

2012-06-19 Kavu

禁用嚴格模式只會使其失敗。即使沒有錯誤，它仍然不起作用，當事情失敗時，調試更加困難。 – Esailija

閱讀代碼中的註釋：

(function(){ 
    'use strict'; 
    var canvas=document.createElement("canvas"); 
    // canvas object must have size 
    var w=canvas.width=100; 
    var h=canvas.height=50; 
    var ctx=canvas.getContext("2d"); 
    var imgData=ctx.getImageData(0,0,w,h); 
    // In next line you retrieve array of RGBA values where each array element 
    // is value between 0 and 255. Array size is size imgData.width*imgData.height 
    var pixelData = imgData.data; 
    pixelData[0] = 128; // Store 128 for Red channel of first pixel: (0,0) 
    pixelData[5] = 128; // Store 128 for Green channel of second pixel 
    imgData.data = pixelData; // Error 
})();

您還可以使用putImageData方法使用另一個CanvasImageData對象修改畫布的內容：

var newImgData=ctx.createImageData(w,h); 
    ctx.putImageData(newImgData,0,0);

閱讀有關CanvasImageData在MDN： https://developer.mozilla.org/en/DOM/ImageData和MSDN：http://msdn.microsoft.com/en-us/library/ie/ff974957%28v=vs.85%29.aspx

MSDN中的HTML5畫布：http://msdn.microsoft.com/en-us/library/ie/hh771733%28v=vs.85%29.aspx

來源

2012-06-19 10:26:14

您應該使用putImageData()來代替。看看this article求助

來源

2012-06-19 10:19:57

的ImageData數據分配

回答

相關問題