javascript - 从数组javascript重建图像

Question

我如何从 javascript 中的数据数组重建图像。并将其显示在我的页面上。

数据不是十六进制或二进制，而是颜色值 [0-255] 黑色和白色，因此是 8 位图像。

有人可以指导我如何从此类光栅数据重建图像吗？我指的是 native javascript 图像对象。

这是一个简单的数据片段。

图像

{"data":[[9,6,7,7,8,8,8,8,8,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,10,10,9,9,10,9,9,10,9,10,10,10,10,9,9,9,9,9,10,9,9,10,9,10,9,9,9,10,9,9,10,9,9,10,9,9,10,9,9,10,10,10,9,10,9,9,10,10,10,10,10,9,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,10,10,10,11,10,10,11,10,10,10,10,10,11,11,11,11,11,11,11,10,10,10,10,10,11,11,11,11,11,10,11,10,11,11,10,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,12,12,11,12,11,11,11,12,11,11,12,12,12,11,11,12,12,12,11,12,12,12,12,12,12,

它们每个代表每个像素。

谢谢

Answer 1

您提供的数据(尽管不完整)与 .getImageData() 提供的格式极为相似。这就是我用来创建简单解决方案的方法。

function dataToBase64(colors, width, height){
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        color;
    //setup canvas
    canvas.width = width,
    canvas.height = height;
    //grab data
    var data = ctx.getImageData(0, 0, width, height),
        _data = data.data; //simple speed optimization    
    //place data
    for(var i = 0, l = _data.length; i < l; i+=4){
        color = colors[i/4];
        _data[i] = color,
        _data[i+1] = color,
        _data[i+2] = color,
        _data[i+3] = 255;
    }
    ctx.putImageData(data, 0, 0);
    //return base64 string
    return canvas.toDataURL();
}

请注意，此函数返回一个 Base64字符串，然后您需要对其进行处理。我提供了一个 fiddle 来向您展示如何使用该功能。

jsfiddle