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

【问题标题】：How to get pixel coordinates from canvas polygon (filled area)如何从画布多边形（填充区域）获取像素坐标
【发布时间】：2015-02-16 08:08:05
【问题描述】：

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

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

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

【问题讨论】：

如果每个多边形都是一个覆盖的画布，你应该可以使用 imageData 因为没有填充的应该是默认颜色
我明白你的意思，谢谢，但是我在将图像数据转换为像素数组时遇到了问题。
var data=image.data; data 是一个像素数组，但格式有点奇怪（R_G_B_A 第一个像素 = data[0]_data[1]_data[2]_data[3]，第二个从 data[4] 开始）w3schools.com/tags/canvas_getimagedata.asp

标签： javascript html google-maps canvas coordinates

【解决方案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);
    }
  }

【讨论】：

非常感谢，这正是我想要的。