严格模式下的ImageData数据分配

时间:2012-06-19 09:44:29

标签: javascript html5-canvas

假设我有一个用于处理canvas原始像素数据的PoC代码段

(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的设定者的文档?

谢谢!

2 个答案:

答案 0 :(得分:1)

您应该使用putImageData()代替。请this article寻求帮助

答案 1 :(得分:1)

阅读代码中的评论:

(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