在javascript和Html5中從Array創建圖像

Question

這是我的代碼。 我在javascript中創建了imageData 2D數組。 將所有像素放入此數組后，我想創建圖像並將這些值放入圖像中。

    var imageData = new Array(width);

    var image = new Image;

for (var i = 0; i < width; i++) {
    imageData[i] = new Array(height);
}

    image.src = imageData; //Here is the problem. I want to do that. 

Answer 1

要從數組創建圖像，您可以執行以下操作：

var width = 400,
    height = 400,
    buffer = new Uint8ClampedArray(width * height * 4); // have enough bytes

最后的* 4表示我們需要與畫布兼容的RGBA。

使用一些數據填充緩沖區，例如：

for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {
        var pos = (y * width + x) * 4; // position in buffer based on x and y
        buffer[pos  ] = ...;           // some R value [0, 255]
        buffer[pos+1] = ...;           // some G value
        buffer[pos+2] = ...;           // some B value
        buffer[pos+3] = 255;           // set alpha channel
    }
}

填充時使用緩沖區作為畫布的來源：

// create off-screen canvas element
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = width;
canvas.height = height;

// create imageData object
var idata = ctx.createImageData(width, height);

// set our buffer as source
idata.data.set(buffer);

// update canvas with new data
ctx.putImageData(idata, 0, 0);

請注意，您可以使用imageData緩沖區（此處為：idata.data）而不是創建自己的緩沖區。 如果你使用例如浮點值或從其他來源獲取緩沖區，那么創建自己的實際上非常有用 - 設置緩沖區如上所述將為你剪切和舍入值。

現在，自定義數組中的數據將復制到畫布緩沖區。 下一步是創建一個圖像文件：

var dataUri = canvas.toDataURL(); // produces a PNG file

現在您可以使用data-uri作為圖像的源：

image.onload = imageLoaded;       // optional callback function
image.src = dataUri

Answer 2

你不能像這樣制作一個image.src。

有效的dataURL是base64編碼的字符串，帶有類型前綴 - 而不是數組。

與畫布關聯的圖像數據數組是Uint8ClampedArray - 不是普通的javascript數組。

這是創建可以操作的像素陣列的一種方法：

演示： http ： //jsfiddle.net/m1erickson/956kC/

// create an offscreen canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

// size the canvas to your desired image
canvas.width=40;
canvas.height=30;

// get the imageData and pixel array from the canvas
var imgData=ctx.getImageData(0,0,40,30);
var data=imgData.data;

// manipulate some pixel elements
for(var i=0;i<data.length;i+=4){
    data[i]=255;   // set every red pixel element to 255
    data[i+3]=255; // make this pixel opaque
}

// put the modified pixels back on the canvas
ctx.putImageData(imgData,0,0);

// create a new img object
var image=new Image();

// set the img.src to the canvas data url
image.src=canvas.toDataURL();

// append the new img object to the page
document.body.appendChild(image);

Answer 3

創建大小合適的canvas元素並獲取其2D渲染上下文。 您不必將此畫布添加到文檔中。 使用上下文創建ImageData對象。 將數組中的值復制到ImageData對象中。 在您的情況下，首先填充ImageData對象可能更有效，而不是單獨的數組。 使用上下文的putImageData繪制像素數據。 然后，根據“創建圖像”的具體要求，您可能需要將畫布序列化為數據uri，以便您可以填寫img元素的src 。