Skip to content
This repository has been archived by the owner on Oct 16, 2020. It is now read-only.

miguelmota/sobel

Repository files navigation


logo


sobel

Sobel Filter algorithm in JavaScript.

License Build Status dependencies Status NPM version

Sobel Filter is an algorithm often used for edge detection.

NPM

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