CODEWITHSUNDEEP
javascriptimage-processingcanvas
arlg
arlg

Reputation: 1138

Javascript Canvas edge detection

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

Upvotes: 8

Views: 20031

Answers (2)

Gabriel Archanjo
Gabriel Archanjo

Reputation: 4597

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>

Upvotes: 10

arlg
arlg

Reputation: 1138

I used JsFeat as suggested by markE, cheers !

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

Upvotes: 5

Related Questions