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/