从图像中获取多维数组答案

【问题标题】：Get Multidimensional Array from image从图像中获取多维数组
【发布时间】：2015-02-16 17:50:17
【问题描述】：

我正在尝试从图像中获取一个多维数组，它将逐个像素地输出它的内容。

Twist 是，我正在尝试获取它，以便我可以一次抓取 x 个像素，抓取该块中的主要颜色，并将其显示为数组中的一个“像素”。

例如，下面的图像是 20x20。如果我想抓取图像的每 10sq 像素，我希望数组如下所示：

ImageArray = [ 
[#F00,#000],
[#000,#F00]
];

然后，如果我想抓取每 5 平方像素的像素，我希望它吐出这个：

ImageArray = [ 
    [#F00,#F00,#000,#000],
    [#F00,#F00,#000,#000],
    [#000,#000,#F00,#F00],
    [#000,#000,#F00,#F00]
];

是否有任何 javascript 插件可以为我做到这一点？如果没有，我怎么能去创造这个？

提前感谢您的帮助！

编辑

忘记添加图片了！这是示例图片：

【问题讨论】：

【解决方案1】：

只是一个提示，使用 Canvas。

ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(x, y, width, height).data;

imgData 现在是一个数组，其中每 4 个位置是每个像素。所以 [0][1][2][3] 是第一个像素的 [r][g][b][a]。

只需根据您的需要对其进行修改以使其工作。 :) 很简单。

【讨论】：