假设我有这样的 PoC 代码片段,用于处理
canvas
原始像素数据
(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>
所以,我可以禁用严格模式,一切都会变得完美,但是有没有可能在严格模式下实现这一点?也许我只是没有找到关于
data
的 setter 的文档?
谢谢!
阅读代码中的注释:
(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 对象来修改 CANVAS 的内容:
var newImgData=ctx.createImageData(w,h);
ctx.putImageData(newImgData,0,0);
在 MDN 中阅读有关 CanvasImageData 的信息: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
ImageData.data
无法被覆盖,但完成像素操作后您可以一次更改一个像素的数据,然后使用putImageData()
查看结果:
const id = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < id.data.length; i++) {
id.data[i] = pxArray[i];
}
canvas.getContext('2d').putImageData(id,0,0);
我有同样的问题,我正在使用热图js,在简单的http服务器上运行的热图js纯javascript代码可以工作。在我的反应应用程序中,相同的代码不起作用。
无法分配给对象“#”的只读属性“data”