Javascript Canvas 边缘检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22330293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Canvas edge detection
提问by arlg
I would like to achieve this kind of image processing effect in Canvas :
我想在 Canvas 中实现这种图像处理效果：
What i need is an edge detection algorithm or explanation to draw only black pixels or border element ( such as a face for example ) of the image that an user can submit.
我需要的是边缘检测算法或解释，以仅绘制用户可以提交的图像的黑色像素或边框元素（例如人脸）。
cheers
干杯
采纳答案by arlg
I used JsFeat as suggested by markE, cheers !
我按照 markE 的建议使用了 JsFeat，干杯！
回答by Gabriel Ambrósio Archanjo
Following your idea, the first step is the Edge detection. The example below shows hot to detect edges using MarvinJ. Having the edges, you might get the object contour.
按照您的想法，第一步是边缘检测。下面的示例显示了使用MarvinJ检测边缘的热点。有了边缘，您可能会得到对象轮廓。
Input Image:
输入图像：
Edge Detection:
边缘检测：
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>