Javascript Canvas边缘检测

Question

我想在Canvas中实现这种图像处理效果：

WebGL图像处理

我需要的是边缘检测算法或解释，以仅绘制用户可以提交的图像的黑色像素或边界元素（例如，脸部）。

干杯

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> 

Answer 2

我按照MarkE的建议使用了JsFeat，干杯！

http://inspirit.github.io/jsfeat/