Sobel Filter algorithm in JavaScript.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add missing event object Mar 4, 2016
.editorconfig init Jun 10, 2015
.gitattributes init Jun 10, 2015
.gitignore init Jun 10, 2015
.jscsrc init Jun 10, 2015
.jshintrc init Jun 10, 2015
.travis.yml init Jun 10, 2015
CHANGELOG.md Check for object before attempting to generate canvas image data. Add… Feb 7, 2016
LICENSE.md init Jun 10, 2015
README.md screenshot Aug 13, 2017
package.json update package json Oct 9, 2017
screenshot.png screenshot Aug 13, 2017
sobel.js Check for object before attempting to generate canvas image data. Add… Feb 7, 2016

README.md

sobel

Sobel Filter algorithm in JavaScript.

Sobel Filter is an algorithm often used for edge detection.

NPM

Demo

https://lab.miguelmota.com/sobel

Install

npm install sobel

Usage

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);
};

License

MIT