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

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

简而言之，您不应该在 JavaScript 中执行此操作，因为出于多种原因它应该是服务器操作。但是，您需要提供有关您要执行的操作的更多详细信息。有多种路线可供选择：

• 使用 DIV 块。这是非常慢的，可能是最糟糕的方法，但它可能是最容易理解的。
• 使用 HTML Canvas（或类似画布的替代方案，如 excanvas）。可能是下一个最简单的，尽管我认为它对于玩具之外的任何东西来说都是最没有用处的。
• 在 SVG 中绘制一些东西（或者通过 RaphaelJS 之类的类似 SVG 的东西）。尽管 32x32 块看起来很小，但作为一般规则，这看起来是最好的。
• 与 Flash 或 Silverlight 等插件中内置的渲染器交互。

让我们来详细了解一下 canvas 方法（使用 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);
    }
}