从图像中获取多维数组

Question

我试图从图像中获取多维数组，然后逐个像素地输出它的内容。

Twist是，我试图获得它，以便我可以一次抓取x像素，抓住该块中的主要颜色，并将其显示为一个像素＆＃34;在数组中。

例如，下面的图片是20x20。 如果我想抓住图像的每个10sq像素，我希望数组像这样出现：

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

然后，如果我想抓住每个5sq像素的像素，我希望它能吐出来：

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

有没有可以为我这样做的javascript插件？如果没有，我怎么能创建这个？

提前感谢您的帮助！

修改

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

Answer 1

只是一个提示，使用画布。

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

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

只需根据您的需要进行修改即可。 :)很容易。