3

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>

したがって、Strict Mode を無効にするとすべてが完璧になりますが、Strict Mode でこれを実装する可能性はありますか? たぶん、セッターのドキュメントが見つからなかったのdataですか？

ありがとう！

4

2 に答える 2

1

putImageData()代わりに使用する必要があります。ヘルプについては、この記事を参照してください

于 2012-06-19T10:19:57.913 に答える
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

于 2012-06-19T10:26:14.913 に答える