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

Change Log

All notable changes to this project will be documented in this file.

This project adheres to Semantic Versioning.

[0.0.3] - 2015-09-09

Changed

• Sobel() returns Uint8ClampedArray with sobel data.
• [sobelData].toImageData() return new ImageData object.

[0.0.6] - 2016-02-07

Fixed

• [sobelData].toImageData() to return fake image data object if ImageData not supported.

  Added

• Sobel.toImageData(data, width, height) return new ImageData object.