Question

我的图像尺寸为32 * 32并且每个像素颜色都有数组。这种颜色是红绿蓝的组合。我想在javascript中使用这个数组绘制图像。如何使用这些信息绘制图像？

Answer 1

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

使用DIV块。这非常缓慢，可能是最糟糕的做法，但它可能是最容易理解的。
使用HTML Canvas（或类似画布的替代品，如excanvas）。可能是下一个最简单的，但我认为它对玩具以外的任何东西都是最不实用的。
在SVG中绘制一些东西（或像RaphaelJS那样在SVG中绘制）。作为一般规则，这看起来最好，尽管32x32块看起来很小。
与Flash或Silverlight等插件内置的渲染器接口。

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

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

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

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

2 个答案: