画布黑白图像以塑造形状答案

【问题标题】：Canvas Black and White Image to Shape画布黑白图像以塑造形状
【发布时间】：2014-06-06 08:43:05
【问题描述】：

我目前已将一张简单的图片加载到画布上。

它只是一个黑色背景的白色圆圈。

我想要做的是将那个白色区域转换成一个形状。然后这个形状将用于边界检测。

我假设我需要逐个像素地遍历图像数据？我以前为颜色处理做过这个，但我不确定如何将这些信息保存到“界内”和/或“界外”。

使用的其他图片会稍微复杂一些：

谢谢！

【问题讨论】：

标签： javascript jquery html canvas boundary

【解决方案1】：

下面是如何使用 context.getImageData 来测试鼠标下的像素是黑色还是白色：

关键是获取图像像素数组并测试红色、绿色或蓝色分量中是否有任何接近 255（如果所有 rgb 都等于 255，则==白色）

示例代码和演示：http://jsfiddle.net/m1erickson/Uw3A4/

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var data;
var $results=$("#results");

var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png";

function start(){
    canvas.width=img.width;
    canvas.height=img.height;
    ctx.drawImage(img,0,0);
    data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
}


function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  var isWhite=(data[(mouseY*canvas.width+mouseX)*4]>200);
  $results.text(isWhite?"Inside":"Outside");

}

$("#canvas").mousemove(function(e){handleMouseMove(e);});

【讨论】：

markE，你肯定很摇滚。非常感谢您回答这个问题:)

【解决方案2】：

使用圆圈进行边界检测比这容易得多。只需使用距离公式来确定对象是否在圆的半径内。

d = sqrt((x2 - x1)^2 + (y2-y1)^2)

【讨论】：

感谢您的回答，不过这些将是复杂的黑白形状 - 我只是以圆圈为例 :)
好的。那你应该这么说。