PutImageData 给出黑屏

Question

我有一个从 webgl 程序传递过来的像素数据数组。然后我处理绿色筛选的像素数据并将结果输出到 2d canvas。考虑到我是 Canvas 2d 的新手，我的问题是，如何将图像数据正确传递给 canvas.

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 值，长度为 innerWidth x innerHeight x 4）。

此外，您输入的是 data 而不是 ImageData id。

PutImageData 给出黑屏

PutImageData gives black screen

javascript

2d

canvas

putimagedata