Vẽ hình ảnh từ mảng pixel trên canvas với putImageData

Question

Tôi đang làm việc trên một dự án có thể mã hóa hình ảnh và vẽ lại hình ảnh đã giải mã trên canvas. Vì tôi vẫn còn khá mới để viết mã và lập trình, tôi hiện đang gặp sự cố khi vẽ lại dữ liệu hình ảnh đã giải mã, là mảng pixel ở dạng R, G, B, A. Tôi nghĩ điều này có thể thực hiện được bằng cách chỉ cần đưa dữ liệu vào

ctx.putImageData(imgd,0,0); 

Nhưng firebug cho tôi biết rằng giá trị không thực hiện giao diện cho imagedata. Tôi đã đăng toàn bộ mảng here. Hình ảnh rộng 160px và cao 120px.

Có cách nào để định dạng lại mảng sao cho có thể vẽ trên canvas không?

Answer 1

Giả sử imgd chỉ đơn giản là một mảng chứa tất cả các giá trị byte, bạn vẫn cần chuyển đổi mảng thành ImageData.

var imgd = [27,32,26,28,33,27,30,35,29,31.....] 

// first, create a new ImageData to contain our pixels 
var imgData = ctx.createImageData(160, 120); // width x height 
var data = imgData.data; 

// copy img byte-per-byte into our ImageData 
for (var i = 0, len = 160 * 120 * 4; i < len; i++) { 
    data[i] = imgd[i]; 
} 

// now we can draw our imagedata onto the canvas 
ctx.putImageData(imgData, 0, 0); 

Answer 2

Sử dụng uint8 bạn có thể này nhanh hơn nhiều:

var canvas = document.createElement("canvas"), 
    ctx = canvas.getContext("2d"), 
    img = [27,32,26,28, ... ]; 

// Get a pointer to the current location in the image. 
var palette = ctx.getImageData(0,0,160,120); //x,y,w,h 
// Wrap your array as a Uint8ClampedArray 
palette.data.set(new Uint8ClampedArray(img)); // assuming values 0..255, RGBA, pre-mult. 
// Repost the data. 
ctx.putImageData(palette,0,0); 

Không cần phải đi byte-by-byte, trừ khi bạn cần phải sửa đổi các giá trị đầu tiên.