从数组javascript重建图像 [英] reconstruct image from array javascript

问题描述

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

How do i reconstruct the image from an array of data in javascript. And display it on my page.

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

the data is not hex or binary but a color value [0-255] black and white, so 8 bits image.

可能有人给我显示如何从这样的栅格数据重建图像的方向。
我指的是原生JavaScript图像对象。

Could some one give me show direction on how to rebuild the image from such raster data. I refer native javascript image object.

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

here is a simple snippet of the data.

IMAGE

{"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,

每个代表每个像素。

感谢

推荐答案

您提供的数据）非常类似于 .getImageData（）给出的格式。这是我用来创建一个简单的解决方案。

The data you're providing (albeit incomplete) is extremely similar to the format given by .getImageData(). So that is what I've used to create a simple solution.

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 字符串，然后您需要使用它。我已经提供了一个小提示，告诉你如何使用该函数。

Note that this function returns a Base64 string, which you then need to do something with. I've provided a fiddle to show you how to use the function.

jsfiddle

这篇关于从数组javascript重建图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！