Javascript Canvas edge detection

Question

I would like to achieve this kind of image processing effect in Canvas :

WebGL image processing

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

• markE: Are you wanting something like this (see the edge detection part of the link): i-programmer.info/news/105-artificial-intelligence/…
• arlg: Thanks I didn't see this library and the Canny edge effect could be something good to play with. I'm gonna try with this one thanks very much !
• Wagner Bertolini Junior: @arlg did you ended up using Canny edge effect? What it a good solution?

Answer 1

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.

Input Image:

enter image description here

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>

Answer 2

I used JsFeat as suggested by markE, cheers !

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