如何使用javascript从像素颜色数组创建图像

Question

我有一张32*32大小的图片，并且有每个像素颜色的数组。这个颜色是由红色、绿色和蓝色组合而成的。我想在JavaScript中使用这个数组来绘制图像。如何使用这些信息来绘制图像？

- user894554

---

现在有好的方法可以做到这一点。请参见https://dev59.com/8GYr5IYBdhLWcg3wvszR。 - Don McCurdy

Answer 1

简短回答是不应该在JavaScript中这样做，因为出于各种原因，这应该是服务器操作。但是，您需要提供有关您要尝试的内容的更多详细信息。有许多路线可选择：

- 使用DIV块。这非常慢，可能是最糟糕的方法，但很容易理解。 - 使用 HTML Canvas（或类似的替代方案，如excanvas）。这可能是下一个最简单的方法，但我认为除了玩具之外几乎没用。 - 在SVG中绘制一些内容（或通过像RaphaelJS这样的东西使用类似SVG的内容）。一般来说，这看起来最好，尽管32x32块似乎非常小。 - 与某些插件中内置的渲染器进行接口交互，例如Flash或Silverlight。

让我们对画布方法进行详细分析（使用像Chrome这样的浏览器的本机画布命令）：

var drawingCanvas = document.getElementById('myDrawing');
if(!drawingCanvas.getContext) 
{
    return;
}
var context = drawingCanvas.getContext('2d');
var pixSize = 1;
for (var i=0; i < rows.length; i++)
{
    var col = rows[i];
    for (var j=0; j < col.length; j++)
    {
        context.fillStyle = col[j]; // assumes the data is in #hex format already.
        context.fillRect(j*pixSize,i*pixSize,pixSize,pixSize);
    }
}

- John Green

Answer 2

这假定你的像素颜色都是十六进制格式。如果不是，那么你需要以某种方式进行转换：

var imgData = [ /* your array of pixel colors */ ],
    img = document.createElement('div'),
    i = 0, l = imgData.length,
    pixel;
img.style.cssText = 'overflow:hidden; width:32px; height:32px';
while (i < l) {
    pixel = document.createElement('div');
    pixel.style.cssText =
        'float:left; width:1px; height:1px; background-color:#' + imgData[i];
    img.appendChild(pixel);
    i += 1;
}
document.body.appendChild(img);

- sdleihssirhc

---

这是错误的答案。使用imageData的Canvas才是正确的方法。 - Phyo Arkar Lwin

这真的是一个糟糕的解决方案！ - Peter Davis