canvas - 从普通 javascript 数组构建 ImageData 数组

Question

我有一系列构建 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 值的输出显示了正确的值流。

Answer 1

在 中设置值后mc_px_data，必须将其转换为 aUInt8ClampedArray并正确设置数据，否则将无法写入。以下应该在您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);