sobel

Sobel Filter algorithm in JavaScript.

Sobel Filter is an algorithm often used for edge detection.

Demo

https://lab.miguelmota.com/sobel

Install

npm install sobel

Getting started

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var image = new Image();
image.src = 'images/valve.png';
image.onload = drawImage;
 
function drawImage(event) {
  var width = image.width;
  var height = image.height;
 
  canvas.width = width;
  canvas.height = height;
 
  context.drawImage(image, 0, 0);
  var imageData = context.getImageData(0, 0, width, height);
 
  // Sobel constructor returns an Uint8ClampedArray with sobel data
  var sobelData = Sobel(imageData);
 
  // [sobelData].toImageData() returns a new ImageData object
  var sobelImageData = sobelData.toImageData();
  context.putImageData(sobelImageData, 0, 0);
}

Same example as above but using a Web Worker:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var image = new Image();
image.src = 'images/valve.png';
image.onload = drawImage;
 
function drawImage(event) {
  var width = image.width;
  var height = image.height;
 
  canvas.width = width;
  canvas.height = height;
 
  context.drawImage(image, 0, 0);
  var imageData = context.getImageData(0, 0, width, height);
 
  var ww = new Worker('/webWorker.js');
  ww.postMessage(imageData);
 
  ww.onmessage = function(event) {
    var sobelData = event.data;
 
    // Sobel.toImageData() returns a new ImageData object
    var sobelImageData = Sobel.toImageData(sobelData, width, height);
    contextSobel.putImageData(sobelImageData, 0, 0);
  };
}

In webWorker.js:

importScripts('/sobel.js');
 
self.onmessage = function(event) {
  // Sobel constructor returns an Uint8ClampedArray with sobel data
  var sobelData = Sobel(imageData);
 
  self.postMessage(sobelData);
};

Check out the full example in the example folder.

License

MIT