Canvas 从普通javascript数组构建ImageData数组

我有一系列构建rgba序列数组的函数，我计划将这些数据应用到画布对象。我不知道如何将rgba（已经有0-255个值）转换为可以使用的适当imageData对象。putImageData

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);

var new_canvas=document.createElement（'canvas'）；
var mc_ctx=new_canvas.getContext（'2d'）；
新画布宽度=50；
新画布高度=50；
var mc_imageData=mc_ctx.getImageData（0,0,50,50）；
var mc_px_data=mc_imageData.data；
对于（var i=0；i在
mc_px_data
中设置值后，必须将其转换为
uint8clampedaray
并正确设置数据，否则它将无法写入。在
for loop
（未测试）之后，以下操作应起作用

var new_canvas=document.createElement（'canvas'）；
var mc_ctx=new_canvas.getContext（'2d'）；
新画布宽度=50；
新画布高度=50；
var mc_imageData=mc_ctx.getImageData（0,0,50,50）；
var mc_px_data=mc_imageData.data；
对于（var i=0；i，
rgba_数组
在哪里定义的？你确定它包含一个
ImageData
对象吗？console.log（rgba_数组）
显示了什么？@MarcB-rgba_数组可能不是一个ImageData对象，它只是一个以rgba值作为条目的普通数组，例如255,0,0255…（红色）等等。你只能将putImagedata与ImageData对象一起使用。你可以用数组的值填充它的
data
属性，但你需要ImageData对象。@Kaido-你能用示例将其作为答案发布吗？我对canvas元素还是有点陌生。仍然是一个很难回答的问题…首先，一个建议：创建一个空的ImageData，使用
context.createImageData（width，height）
方法，它比
getImageData（）
方法要轻得多。其次，为了能够帮助您，我们需要一些关于这个
rgba_数组的信息。您确定它只包含50*50 px的rgba值吗（如果是，则rgba_数组。长度应为
10000
）。那么，您是否确定其所有10000 firsts值都未设置为
255
？如果您仍然没有发现问题，请检查您是否确实附加了画布，并且画布应该在您的文档中可见。您应该已经发布了完整的代码以及所做的更改，这确实很难阅读way@moeiscool我已经为co添加了原始代码根据你的建议，我们的产品很简单。
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);