JavaScript画布边缘检测

Question

我希望在Canvas中实现这种图像处理效果： WebGL图像处理 我需要一种边缘检测算法或解释，以绘制用户提交的图像中仅为黑色像素或边框元素（例如面部）。

谢谢。

- arlg

---

你是否想要类似于这个的东西（请参见链接中的边缘检测部分）：http://www.i-programmer.info/news/105-artificial-intelligence/5127-jsfeat-javascript-image-processing-library.html - markE

谢谢，我之前没看到这个库，Canny边缘效果可能是一个不错的玩具。我会试试这个库，非常感谢！ - arlg

@arlg，你最终使用了Canny边缘效果吗？这是一个好的解决方案吗？ - Wagner Bertolini Junior

Answer 1

根据您的想法，第一步是边缘检测。下面的示例展示了如何使用MarvinJ来检测边缘。有了边缘之后，您可以得到物体轮廓。

输入图像:

边缘检测:

var canvas = document.getElementById("canvas");

image = new MarvinImage();
image.load("https://i.imgur.com/ZHgkM9w.jpg", imageLoaded);

function imageLoaded(){
  var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  
  // Edge Detection (Prewitt approach)
  Marvin.prewitt(image, imageOut);
  // Invert color
  Marvin.invertColors(imageOut, imageOut);
  // Threshold
  Marvin.thresholding(imageOut, imageOut, 220);
  imageOut.draw(canvas); 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="500" height="344"></canvas>

- Gabriel Archanjo

Answer 2

我使用了markE建议的JsFeat，感谢！http://inspirit.github.io/jsfeat/

- arlg