如何从 canvas 多边形（填充区域）获取像素坐标

Question

我正在创建一个界面，使用户能够在地图中突出显示 自定义区域 ，并使用 覆盖 canvas 多边形 。如图。然后，我想从 canvas 中获取具有指定颜色的 所有填充像素，以便我可以将该像素值转换为 geo LAT-LONG 值。我想创建自定义数据库，其中包含带有标记的自定义已知名称的 LAT-LONG 值范围。可以通过鼠标拖动来创建叠加 canvas 多边形。但是我在从 canvas 中检索填充区域作为像素数组时遇到问题。我发现

var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
var data=image.data;

但是，不可能迭代所有值并转换相关的 R、G、B 值并使用指定颜色对整个图像数据进行验证。相反，是否有任何方法可以仅针对多边形的填充区域将图像数据作为像素获取，并让我知道用于此目的的其他解决方案（如果有）？ ![在此处输入图片描述][1] 请帮助我。

Answer 1

你需要的是逆向加工。您可以简单地迭代 canvas 并通过以下公式创建索引和相关的 RGBA 值，并与填充颜色进行比较。

var index = (x + y * imageData.width) * 4;

示例执行如下：

var imageData = ctx.getImageData(0, 0,canvas.width, canvas.height);
  var data = imageData.data;
  var filled=[];
  for(var x=0;x<canvas.width;x++){
  for(var y=0;y<canvas.height;y++){
    var index = (x + y * imageData.width) * 4;

    if(data[index+0]==colorToCheck.R && data[index+1]==colorToCheck.G && data[index+2]==colorToCheck.B && data[index+3]==colorToCheck.A){
        var cx={"X":x,"Y":y}; //
        filled.push(cx);
    }
  }

如何从 canvas 多边形（填充区域）获取像素坐标

How to get pixel coordinates from canvas polygon (filled area)

html

javascript

google-maps

canvas

coordinates