将二维像素数组复制到 Javascript 画布答案

【问题标题】：Copy a 2-dimensional pixel array to a Javascript canvas将二维像素数组复制到 Javascript 画布
【发布时间】：2012-12-11 18:33:39
【问题描述】：

使用 Javascript 画布元素，是否可以将 RGB 值的二维数组复制到画布上？

<html>
<body>
<canvas id="canvas" height="200" width="200"></canvas>
<script type = "text/javascript">

//copy the following array to the canvas:
var arr1 = [
[[255, 255, 255],[200, 200, 0],[200, 200, 200]],
[[200, 0, 0],[200, 200, 0],[200, 200, 0]],
[[200, 200, 0],[200, 0, 0],[200, 200, 0]]
]

<script>
</body>
</html>

【问题讨论】：

我找到了一个相关的例子：jsfiddle.net/Z6CHB/1 现在我只需要修改它，让它将一个数组复制到画布上。
与此相反的是从画布中获取像素：stackoverflow.com/questions/6727090/…

标签： javascript canvas

【解决方案1】：

您可以使用getImageData/putImageData。只需计算正确的索引（它是一个大数组中的 RGBA 值）：http://jsfiddle.net/zjypd/（jsFiddle 有一个放大的画布来显示像素）。

var arr1 = [
    [[255, 255, 255],[200, 200, 0],[]],
    [[200, 0, 0],[200, 200, 0],[200, 200, 0]],
    [[200, 200, 0],[200, 0, 0],[200, 200, 0]]
];

var ctx = document.querySelector("canvas").getContext("2d");

var height = arr1.length;
var width = arr1[0].length;

var h = ctx.canvas.height;
var w = ctx.canvas.width;

var imgData = ctx.getImageData(0, 0, w, h);
var data = imgData.data;  // the array of RGBA values

for(var i = 0; i < height; i++) {
    for(var j = 0; j < width; j++) {
        var s = 4 * i * w + 4 * j;  // calculate the index in the array
        var x = arr1[i][j];  // the RGB values
        data[s] = x[0];
        data[s + 1] = x[1];
        data[s + 2] = x[2];
        data[s + 3] = 255;  // fully opaque
    }
}

ctx.putImageData(imgData, 0, 0);

【讨论】：

我的示例中的一个数组是空的 - 抱歉打错了！（空数组应该是[200, 200, 200]）。
要改变数组比例（在这个例子中），你只需要改变css部分的像素值。 :)
@AndersonGreen：我刚刚意识到你可以更好地使用(0, 0, w, h) 而不是硬编码的(0, 0, 3, 3) 作为getImageData 的参数。
也可以调整画布的大小，使其与数组的尺寸相匹配：stackoverflow.com/a/331462/975097
这是我第一次尝试让数组自动调整大小。我仍然不确定它是否正常工作。 jsfiddle.net/zjypd/4