javascript 严格模式下的ImageData数据分配

voj3qocg 于 2023-02-21 发布在 Java

关注(0)|答案(3)|浏览(216)

假设我有这样的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>

所以，我可以禁用严格模式，一切都会变得完美，但有没有可能在严格模式下实现这一点？也许我只是没有找到一个文档的setter为data？
谢谢!

JavaScript

来源：https://stackoverflow.com/questions/11098419/imagedata-data-assignment-in-strict-mode

3条答案

按热度按时间

t9eec4r01#

读取代码中的注解：

(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);

阅读关于Mystic Hostel在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

赞(0）回复(0）举报 2023-02-21

mnemlml82#

您应该改用putImageData()。有关帮助，请查看this article

赞(0）回复(0）举报 2023-02-21

cyej8jka3#

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);

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 严格模式下的ImageData数据分配

3条答案

相关问题

热门标签

最新问答