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

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

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

如果data是一个ArrayLike对象并保存Uint8Clamped值，那么您可以使用TypedArrays的set()方法。

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值，并且内部宽度x innerHeight x 4的长度）。

另外，你输入qazxsw poi而不是ImageData qazxsw poi。