0

我想在带有图像的 html5 画布上绘制一个矩阵。例如，矩阵将如下所示：

var matrix = [
    [0, 0, 0, 1, 0],
    [1, 0, 0, 0, 1],
    [0, 0, 1, 0, 0],
];

我想检测画布上的特定颜色，比如“红色”。矩阵值为红色的所有像素将为“1”，每隔一个颜色将为“0”。这实际上可能吗？

  1. 我们可以在图像画布上绘制矩阵吗？
  2. 我们可以检测颜色并设置/更新矩阵值吗？

这是与这个 js 库一起使用的。我正在尝试构建一个小型室内辅助系统，用户可以使用它从一个点导航到另一个点。我看到了一个与此类似的示例，但无法弄清楚它是如何完成的。

4

1 回答 1

1

你试过getImageData吗？

要获取包含画布上下文的像素数据副本的 ImageData 对象，可以使用 getImageData() 方法：

var myImageData = ctx.getImageData(left, top, width, height);

此方法返回一个 ImageData 对象，该对象表示画布区域的像素数据，其角由点 (left,top)、(left+width, top)、(left, top+height) 和 (left+width) 表示，顶部+高度）。坐标以画布坐标空间单位指定。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

编辑

例如，如果您的“红色”颜色定义为 [255, 0, 0, 255] 您的矩阵可以通过以下方式获得：

var img = new Image();
img.src="http://example.com/image.png";
img.onload = function() {
  var matrix = detect(this, img.width, img.height);
  console.log(matrix);
};

function detect(img, width, height) {

    var matrix = [],
        canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0, width, height);

    for(var i = 0; i < width; i++){
        matrix[i] = [];
        for(var j = 0; j < height; j++){
            var imageData = ctx.getImageData(i, j, 1, 1);
            var data = imageData.data;
            matrix[i][j] = (data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255) ? 1 : 0; 
        }
    }
    return matrix;
}
于 2015-04-30T19:46:55.447 回答