javascript - 在 javascript 和 Html5 中从 Array 创建图像

Question

这是我的代码。我在 javascript 中创建了 imageData 二维数组。将所有像素放入此数组后，我想创建图像并将这些值放入图像中。

    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代表我们需要兼容canvas的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
    }
}

填充时使用缓冲区作为 Canvas 的源:

// 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)而不是创建您自己的缓冲区。仅当您使用浮点值或从其他来源获取缓冲区时，创建您自己的缓冲区才真正有用 - 不过，如上所述设置缓冲区将负责为您裁剪和舍入值。

现在自定义数组中的数据被复制到 Canvas 缓冲区。下一步是创建图像文件:

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

现在您可以使用数据 uri 作为图像的来源:

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