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

Convert Image Pixel Data to Coordinate Array

本文关键字：坐标 数组 转换 数据 图像 像素 像素数      更新时间：2023-09-26

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

   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 坐标访问该数组。绘制到画布的图像是黑/白图像 - 因此它会检查像素在X时是黑色还是白色，Y - 如下所示：

imageArray[x][y]

我不知道如何循环像素数据并将其保存到2d数组中，以便我能够通过坐标调用它。

您可以做的是遍历整个图像数据数组并提取所需的值：

每个像素在数组中占用四个空间作为其 rgba 值，因此我们可以遍历像素总数并每次从数组中获取四个值。

您可以通过将当前索引除以高度来获取 y 值（或像素所在的行），通过使用 y 值从当前索引中减去行，留下 x，获得 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;
}

ctx.getImageData返回一个包含 .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];
相关文章：