PutImageData出现黑屏

Question

我有一个从webgl程序传递来的像素数据数组。然后，我将像素数据进行绿色筛选，然后将结果输出到2d画布中。考虑到我是Canvas 2d的新手，我的问题是，如何正确地将图像数据传递到画布。var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");document.body.appendChild(canvas);canvas.width = window.innerWidth;canvas.height = window.innerHeight;var SetCanvas = function(data){    var id = ctx.createImageData(window.innerWidth, window.innerHeight);    id.data = data;    ctx.putImageData(data, 0, 0);};

Answer 1

data 不能像这样设置ImageData对象的属性。

您需要将此Uint8ClampedArray的每个值设置为传入的值data。

如果data是ArrayLike对象并保存Uint8Clamped值，则可以使用set()TypedArrays方法。

var SetCanvas = function(data){

  var id = ctx.createImageData(window.innerWidth, window.innerHeight);

  id.data.set( data );

  ctx.putImageData(id, 0, 0);

};

但是当然，这是假定data保存正确的数据（即每个像素4个rgba Uint8值，并且长度为innerWidth x innerHeight x 4）。

另外，您还放置了输入data而不是ImageData id。