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

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

• javascript
• image-processing
• canvas

• 2 Are you wanting something like this (see the edge detection part of the link): i-programmer.info/news/105-artificial-intelligence/… – markE Commented Mar 11, 2014 at 16:28
• 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 ! – arlg Commented Mar 11, 2014 at 20:16
• @arlg did you ended up using Canny edge effect? What it a good solution? – Wagner Bertolini Junior Commented Jun 29, 2018 at 19:55

2 Answers 2

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:

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>

I used JsFeat as suggested by markE, cheers !

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