在html5画布上绘制一个带有图像并检测某种颜色的矩阵

Question

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

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

我想检测画布上的特定颜色，说＆＃34;红色＆＃34;。所有红色的像素都是矩阵值将是＆＃34; 1＆＃34;，每隔一个颜色就是＆＃34; 0＆＃34;。这几乎可能吗？

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

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

Answer 1

您是否尝试过getImageData？

  

获取包含像素数据副本的ImageData对象   在画布上下文中，您可以使用getImageData（）方法：

     

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

     

此方法返回表示像素数据的ImageData对象   对于画布区域，其角由点表示   （左，上），（左+宽，上），（左，上+高）和（左+宽，   顶部+高度）。坐标在画布坐标空间中指定   单元。

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

修改

例如，如果你的红色＆＃39;颜色定义为[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;
}