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。