从普通 javascript 数组构建 ImageData 数组答案

【问题标题】：Build ImageData array from normal javascript array从普通 javascript 数组构建 ImageData 数组
【发布时间】：2016-08-12 21:00:44
【问题描述】：

我有一系列构建 rgba 序列数组的函数，我打算将这些数据应用于画布对象。我不确定如何将 rgba（已经是 0-255 值）转换为可以使用 .putImageData 的正确 imageData 对象。

var new_canvas = document.createElement('canvas');
var mc_ctx = new_canvas.getContext('2d');
new_canvas.width = 50;
new_canvas.height = 50;
var mc_imageData = mc_ctx.getImageData(0,0, 50, 50);
var mc_px_data = mc_imageData.data;

for ( var i = 0; i <= rgba_array.length; i++ ) {
    mc_px_data[i] = rgba_array[i];
}

mc_ctx.putImageData(mc_imageData, 0, 0);

我得到的只是白色，即使 rgba_array 值的输出显示了正确的值流。

【问题讨论】：

rgba_array 是在哪里定义的？你确定它包含一个ImageData 对象吗？ console.log(rgba_array) 显示什么？
@MarcB - rgba_array 可能不是 ImageData 对象，它只是一个以 rgba 值作为条目的普通数组，例如 255,0,0,255...（红色）等。
您只能将 putImagedata 与 ImageData 对象一起使用。您可以使用数组的值填充其 data 属性，但您需要 ImageData 对象。
@Kaiido - 您能否通过示例发布此作为答案？我对 canvas 元素还是有点陌生。
仍然是一个很难回答的问题...首先，建议：要创建一个空的 ImageData，请使用 context.createImageData(width, height) 方法，它比 getImageData()one 轻得多。其次，为了能够帮助您，我们需要一些关于此rgba_array 的信息。你确定它只包含 50*50 px rgba 值吗（如果是这样，rgba_array.length 应该是10000）。那么，你确定它的所有 10000 个第一个值都没有设置为 255 吗？如果您仍然没有发现问题，请检查您是否实际附加了您的画布，并且它应该在您的文档中可见。

标签： canvas putimagedata

【解决方案1】：

设置mc_px_data中的值后，必须将其转换为UInt8ClampedArray并正确设置数据，否则无法写入。在您的for loop（未经测试）之后，以下内容应该可以工作

var new_canvas = document.createElement('canvas');
var mc_ctx = new_canvas.getContext('2d');
new_canvas.width = 50;
new_canvas.height = 50;
var mc_imageData = mc_ctx.getImageData(0,0, 50, 50);
var mc_px_data = mc_imageData.data;

for ( var i = 0; i <= rgba_array.length; i++ ) {
    mc_px_data[i] = rgba_array[i];
}

// New code here:
mc_px_data = new Uint8ClampedArray(mc_px_data);
mc_imageData.data.set(mc_px_data);
mc_ctx.putImageData(mc_imageData, 0, 0);

【讨论】：

你应该已经发布了完整的代码和你的更改，这样真的很难阅读
@moeiscool 我已根据您的建议添加了完整的原始代码。