從正常的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數組

回答

相關問題