PutImageData 出现黑屏

【问题标题】：PutImageData gives black screenPutImageData 出现黑屏
【发布时间】：2019-03-27 23:14:24
【问题描述】：

我有一个从 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);
};

【问题讨论】：

如果画布是空的，那么任何由它制成的图像都是黑色的......
这是我第一次使用画布的 2d 上下文，那么画布为空到底是什么意思？我该如何改变呢？

标签： javascript canvas 2d putimagedata

【解决方案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。

【讨论】：