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

问题描述

我创建了一个界面，使用户可以使用叠加画布多边形在地图中高亮自定义区域。如图所示。那么，我想从画布中获取指定颜色的所有填充像素，以便我可以将该像素值转换为 geo LAT-LONG 值。我想创建自定义数据库，保存LAT-LONG值范围与已标记的自定义已知名称。可以通过鼠标拖动创建叠加画布多边形。但我有一个问题从画布中检索填充区域作为像素数组。我发现

I am creating an interface that enables user to hightlight custom area in map with overlay canvas polygons. as in figure. then, I want to get all filled pixels from canvas with specified color so that I can transform that pixel values into geo LAT-LONG values. I want to create custom database that hold LAT-LONG values ranges with tagged custom known names. It's ok to create overlay canvas polygons by mouse-dragging. But I have a problem in retrieving filled area from canvas as pixel array. I found that

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

但是，不可能重复所有的值并转换相关的R，G，B值，颜色用于整个图像数据。相反，是否有任何方法获取图像数据作为像素只填充面积的多边形，让我知道其他解决方案为此目的如果有什么？

But,it's impossible to iterate all value and cast related R,G,B values and validate with specified color for entire image data. Instead, is there any way to get image data as pixels only for filled area of polygon and let me know other solutions for this purpose if any? ![enter image description here][1]Please help me.

推荐答案

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

What you need is reverse processing. You can simply iterate canvas and create index and related RGBA values by following formula and compare with filled color.

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);
    }
  }

这篇关于如何从画布多边形（填充区域）获取像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！