Question

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

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

但是，无法迭代所有值并投射相关的R，G，B值并使用指定的颜色验证整个图像数据。相反，有没有办法将图像数据作为像素仅用于多边形的填充区域，如果有的话，让我知道其他解决方案吗？！[在此处输入图像说明] [1] 请帮帮我。

Answer 1

您需要的是反向处理。您可以通过以下公式简单地迭代画布并创建索引和相关的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);
    }
  }

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

1 个答案: