реконструира изображение от масив javascript

Как да реконструирам изображението от масив от данни в javascript. И го покажете на моята страница.

данните не са шестнадесетични или двоични, а цветна стойност [0-255] черно и бяло, така че 8-битово изображение.

Може ли някой да ми даде указания как да възстановя изображението от такива растерни данни. Препращам към собствен обект на изображение на 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,

Всеки от тях представлява всеки пиксел.

Благодаря


javascript canvas image raster
person LanNguyen    schedule 09.11.2014    source източник
comment
Как можете да различите dimensions изображение от това data? мисля, че това е само color информация, но какво да кажем за width и height?   -  person Vedant Terkar    schedule 09.11.2014
comment
Имам размерите на масива от данни. Но е твърде голям, за да го поставим тук. въпросът ми е как да го реконструирате до изображение.   -  person LanNguyen    schedule 09.11.2014
comment
Вижте html.spec.whatwg.org/multipage/scripting.html#dom -imagedata   -  person guest271314    schedule 09.11.2014
comment
този imageData работи с canvas, има ли начин да се създаде общ обект на изображение в термин на jpeg/png?   -  person LanNguyen    schedule 09.11.2014

Отговори (2)


arrow_upward
1
arrow_downward

Данните, които предоставяте (макар и непълни), са изключително подобни на формата, даден от .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 низ, с който след това трябва да направите нещо. Предоставих цигулка, за да ви покажа как да използвате функцията.

jsfiddle

person EvilZebra    schedule 10.11.2014

arrow_upward
1
arrow_downward

May Be Something Like

THIS

и Ето съответния код

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>

РЕДАКТИРАНЕ

Забелязах, че ако размерът на изображението се увеличи 100X100px, тогава кодът по-горе увисва UI. Така че го промених така:

 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 */
    }

това работи добре тествано за 255 X 255px. Това трябва да работи добре.

Този код рисува 5X5 точки всяка от 5px. За формиране на фигура V в цвят на сивата скала.

Дано помогне. наздраве :)!!.

person Vedant Terkar    schedule 09.11.2014
comment
Това изобразява пиксел, търся конструкция на общ обект като jpeg/png. - person LanNguyen; 09.11.2014