Question

如何从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,

它们中的每一个代表每个像素。

由于

Answer 1

可能有点像

`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形状。

希望它有所帮助。干杯：）!!。

Answer 2

您提供的数据（尽管不完整）与.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

从数组javascript重建图像

2 个答案:

`THIS`