reconstruct image from array javascript

问题

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

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

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,

Each of them represent each pixel.

Thanks

回答1:

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();
}

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

回答2:

May Be Something Like THIS

and Here is relevant code

JS:

var imgData={"data":[100,8,10,12,100,100,14,16,14,100,100,18,18,14,100,0,80,0,80,0,13,15,80,18,0],"width":"5","height":"5"}; // I've added width and height for simplicity
var wid=imgData["width"],hgh=imgData["height"],data=imgData["data"];
function draw(){
var index=-1;
var img=document.getElementById("img");
img.innerHTML="";
for(var i=0;i<hgh;i++)
{
for(var j=0;j<wid;j++)
{
index++;
var pix=data[index];
img.innerHTML+="<span class='pixel' style='background:rgb("+pix+","+pix+","+pix+");position:absolute;top:"+(i*5)+"px;left:"+(j*5)+"px;'></span>"; // rgb(0,0,0)=black to rgb(255,255,255)=white. as your range is also between [0-255];
//change i*5 to i*1 and j*5 to j*1 for 1px X 1px pixel information (I'm using 5X5px).
}
}
}

CSS:

#img{ 
/* Where You want to draw image */
    display:inline-block;
    width:auto;
    height:auto;
   position:relative;
}
.pixel{ /* pixel dimensions for the image */
    width:5px; /*change to 1px*/
    height:5px; /*change to 1px*/
    display:inline-block;
}

HTML:

<body onLoad="draw();">
<div id="img">
<!-- Here Your Image from given grayscale data will be drawn -->
</div>
</body>

EDIT

I've observed that if image size incerases 100X100px then the code above hangs UI. So I've changed it like:

 var imgData={"data":[100,8,10,12,100,100,14,16,14,100,100,18,18,14,100,0,80,0,80,0,13,15,80,18,0],"width":"5","height":"5"}; // I've added width and height for simplicity
    var wid=imgData["width"],hgh=imgData["height"],data=imgData["data"];
    function draw(){
    var index=-1;
    var img=document.getElementById("img");
    img.innerHTML="";
    var p=""; /* Note Change */
    for(var i=0;i<hgh;i++)
    {
    for(var j=0;j<wid;j++)
    {
    index++;
    var pix=data[index];
    // Note change:
    p+="<span class='pixel' style='background:rgb("+pix+","+pix+","+pix+");position:absolute;top:"+(i*5)+"px;left:"+(j*5)+"px;'></span>"; // rgb(0,0,0)=black to rgb(255,255,255)=white. as your range is also between [0-255];
    //change i*5 to i*1 and j*5 to j*1 for 1px X 1px pixel information (I'm using 5X5px).
    }
    }
    img.innerHTML=p; /* Note Change */
    }

this works fine tested for 255 X 255px. This should work fine.

This code draws a 5X5 dots each of 5px. To Form a V shape in grayscale color.

Hope it helps. cheers :)!!.

来源：https://stackoverflow.com/questions/26825636/reconstruct-image-from-array-javascript

标签

javascript

image

canvas

raster