将图像像素数据转换为坐标数组

cid 发布于 2019-06-12 canvas 最后更新 2019-06-12 21:16 1 浏览

我有以下代码将图像绘制到画布上并获取像素数据:

   var canvas=$('#canvas'),
       ctx=canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
    var data=ctx.getImageData(0, 0, canvas.width, canvas.height);
这会将需要存储的RGBA值拉到可以使用X / Y坐标访问的数组中。绘制到画布上的图像是黑色/白色图像 - 因此它会在XY处检查像素是黑色还是白色 - 例如:
imageArray[x][y]
我无法弄清楚如何循环像素数据并将其保存到2d数组中,这样我就可以通过坐标来调用它。
已邀请:

lut

赞同来自:

ctx.getImageData返回包含.data属性的对象。 该data属性是一个已包含您要查找的所有像素颜色的数组。

// get the imageData object
var imageData=ctx.getImageData(0, 0, canvas.width, canvas.height);
// get the pixel color data array
var data=imageData.data;
data数组是一个包含红色,绿色,蓝色和蓝色的长数组。画布上每个像素的alpha(不透明度)值。 data数组的形状如下:
// top left pixel [0,0]
data[0]: Red value for pixel [0,0],
data[1]: Green value for pixel [0,0],
data[2]: Blue value for pixel [0,0],
data[3]: Alpha value for pixel [0,0],
// next pixel rightward [1,0]
data[4]: Red value for pixel [1,0],
data[5]: Green value for pixel [1,0],
data[6]: Blue value for pixel [1,0],
data[7]: Alpha value for pixel [1,0],
// and so on for each pixel on the canvas
...
您可以在data中获取任何[x,y]像素的位置,如下所示:
// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;
然后你可以获取该像素的红色,绿色,蓝色和& alpha值如下:
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

a_et

赞同来自:

你可以做的是遍历整个图像数据数组并提取你需要的值: 每个像素在数组中占用四个空格用于其rgba值,因此我们可以循环遍历像素总数并每次从数组中获取四个值。 您可以通过将当前索引除以高度和x(或列像素打开)来获取y值(或像素所在的行),方法是使用y值从当前索引中减去行,并保留x。

var pixels = imageData.data;
var w = imageData.width;
var h = imageData.height;
var l = w * h;
for (var i = 0; i < l; i++) {
    // get color of pixel
    var r = pixels[i*4]; // Red
    var g = pixels[i*4+1]; // Green
    var b = pixels[i*4+2]; // Blue
    var a = pixels[i*4+3]; // Alpha
// get the position of pixel
    var y = parseInt(i / w, 10);
    var x = i - y * w;
}