从正常的JavaScript数组构建ImageData数组

我有一系列构建rgba序列数组的函数，并计划将这些数据应用到画布对象。我不知道如何将rgba（已经在0-255的值）转换为一个合适的imageData对象，我可以使用.putImageData。从正常的JavaScript数组构建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值的输出显示正确的值流，我也会得到所有白色。

来源

2016-08-12 Karric

“rgba_array”的定义在哪里？你是否确定它包含一个'ImageData'对象？ 'console.log（rgba_array）'显示什么？ –

@MarcB - rgba_array可能不是一个ImageData对象，它只是一个正常的数组，其中包含rgba值作为条目，例如255,0,0,255 ...（红色）等。 – Karric

您只能将putImagedata与ImageData对象一起使用。你可以用数组的值填充它的'data'属性，但是你需要ImageData对象。 – Kaiido

当您在mc_px_data中设置了值后，您必须将其转换为UInt8ClampedArray并正确设置数据或不写入。 for loop（未经测试）

mc_px_data = new Uint8ClampedArray(mc_px_data); 
mc_imageData.data.set(mc_px_data); 
mc_ctx.putImageData(mc_imageData, 0, 0);

来源

2017-01-18 15:05:49 MacroMan

从正常的JavaScript数组构建ImageData数组

回答

相关问题