Visit the demo page to see it in action.
canny.min.js in your html file:
CannyJS.canny method loads the image data from a given canvas, and returns the resulting image data as a
GrayImageData object. To show the resulting image, just call its
// get target canvas element mycanvas = document.getElementById("myCanvas"); // perform edge detection imageData = CannyJS.canny(canvas); // overwrites the original canvas image.drawOn(mycanvas);
You can give some optional parameters to
CannyJS.canny(canvas, [ht=100], [lt=50], [sigmma=1.4], [kernelSize=5])
lt represent high and low threshold values that will be used in hysteresis thresholding procedure. Both
kernalSize are parameters used in Gaussian blur process (note that
kernelSize must be an odd number).
You can also call methods that perform each step of Canny edge detection: gaussian blur, sobel filtering, non-maximum suppression and hysteresis thresholding. Since these methods all receive and return
GrayImageData objects, you first need to build an instance and make it load image data:
var canvas = document.getElementById("myCanvas"); // construct a new GrayImageData object var imageData = new GrayImageData(canvas.width, canvas.height) // load image data from canvas imageData.loadCanvas(canavs);
Available methods are as follows:
// apply Gaussian filter CannyJS.gaussianBlur(imageData, [sigmma=1.4], [kernelSize=5]) // apply sobel filter CannyJS.sobel(blur) // apply non-Maximum suppression CannyJS.nonMaximumSuppression(sobel) // apply hysteresis thresholding CannyJS.hysteresis(nms, [ht=100], [lt=50])