Javascript 画布像素到坐标

我有一张画布，宽度为900，高度为574。我有画布上所有的像素。画布内部有一些矩形，知道矩形的所有像素，我想要的是找到矩形的4个点的坐标，然后找到矩形的宽度和高度

所以我所做的是：

  pMinX = (_.min(points)/ 4) % highlightCanvas.width
  pMinY = Math.floor((_.min(points) / 4) / highlightCanvas.width)
  pMaxX = (_.max(points) / 4) % highlightCanvas.width
  pMaxY = Math.floor((_.max(points) / 4) / highlightCanvas.width)

Points

是我要查找的矩形坐标的像素阵列（4通道rgba）

pMinY和pMaxY似乎工作得很好，而pMinX和pMaX有时似乎是正确的，而其他的则是错误的。 为了测试，我创建了一个浮动的

div

，并根据以下内容调整其大小：

  {
    width:  pMaxX - pMinX
    height: pMaxY - pMinY
  }

div的高度始终正确。但在某些情况下，宽度是失败的。

---

知道为什么有时计算会失败吗？

下面是一段带注释的代码，说明如何计算图像中三文鱼色矩形的边界框（x、y、宽度、高度）

它的工作原理如下：

• 使用

  .getImageData

  获取画布上每个像素的r、g、b、a值

• 设置一个像素的rgba必须满足的测试以被视为“在所需的矩形内”。在您的示例中，三文鱼矩形由2种颜色组成，因此此测试将捕获矩形内的所有像素：

  // create an array to hold tests that are used to
  // find your desired pixels. The tests should be functions
  // that return true for your desired rgba pixel values
  // (substitue whatever algorithm test that are necessary for your design)
  var tests=[];
  
  
  // add a test into the tests[] array
  tests.push(function(r,g,b,a){
      return(
          (r==251 && g==115 && b==119)||
          (r==249 && g==100 && b==107)
      );
  });
  

• 确定满足测试的像素的最小值、最小值、最大值和最大值

• 根据确定的最小值和最大值计算矩形像素的边界框：

  var bounds={
      x:minX,
      y:minY,
      width:maxX-minX,
      height:maxY-minY
  };
  

重要提示：要允许.getImageData，必须满足安全限制。通常的方法是在与您的网页相同的域上提供图像。或者，您可以设置承载映像的服务器，以便将该映像提供给任何匿名请求者

示例代码和演示：

//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//加载图像
var img=新图像（）；
//图像必须满足交叉原点限制
//否则我们不能使用.getImageData
img.crossOrigin='anonymous'；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/findRect.png";
函数start（）{
//将画布调整为图像大小
//并将图像绘制到画布上
cw=画布宽度=图像宽度；
ch=画布高度=图像高度；
ctx.drawImage（img，0,0）；
//创建一个数组来保存用于
//找到你想要的像素。测试应该是函数
//对于所需的rgba像素值返回true
//（替代任何必要的算法测试
//（您的设计）
var测试=[]；
//如果匹配构成rect的2种颜色，则示例测试返回true
试验.推力（功能（r、g、b、a）{
返回(
（r==251&&g==115&&b==119）||
（r==249&&g==100&&b==107）
);
});
//找到满足规定测试的所有像素的边界
var界限=findImageBounds（测试）；
//测试…仅将发现的矩形绘制到第二个画布
var c=document.createElement（'canvas'）；
var cctx=c.getContext（'2d'）；
文件.正文.附件（c）；
c、 宽度=cw；
c、 高度=ch；
cctx.drawImage（画布，
bounds.x，bounds.y，bounds.w，bounds.h，
边界.x，边界.y，边界.w，边界.h
);
}
函数findImageBounds（测试）{
//获取画布上所有像素的rgba颜色值
var d=ctx.getImageData（0,0，cw，ch）.data；
//迭代每个像素
//找到所有测试均为真的像素的最小/最大X，Y
var minX=1000000；
var minY=1000000；
var maxX=-1000000；
var maxY=-1000000；
var=0；
对于（var y=0；y您是否尝试过使用
highlightCanvas.height
作为
y
的替代？@Roco
y
似乎是正确的。请参阅我的问题更新。“有时是正确的，有时是错误的。我的代码中有什么错误”。您不能期望这样的问题得到答案。创建一个演示，让人可以看到“有时”的含义@RokoC.Buljan您可能是对的。很难在fiddle上创建一个演示，但我会尝试一下。我希望有人做过类似的事情，并能在我的X方程中发现问题。@AvraamMavridis
findImageBounds
函数查找边界（X，y，宽度，高度）你的矩形。我只是重新绘制矩形以显示它工作良好！；-）我明白了。我将尝试在工作程序中实现你的逻辑。Thx:）