CORS compliant canvas blur utility
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
README.md
stackblur.js
stackblur.min.js

README.md

Stackblur Canvas


Based upon Quasimondo's blur algorithm.

This version includes CORS support and CSS3 fullscreen options. This version also converts image data to base64 encoding for caching and POST use. As of now only .png and .jpg file types are suppoted.

Demo

Check out the demo here

Requirements

This example utilizes Simple Javascript Inheritance by John Resig. stackblur.js can easily be changed to support Backbone or Fidel

Usage

  var blur = new Blur({
    el : document.querySelector('body'),
    path : 'images/tmp.jpg',
    radius : 5,
    fullscreen : true
  });

Constructor

Call the init method of your constructor directly to update the image asset.

  blur.init({ path : 'images/tmp.' + e.target.id });

Options

Radius and a fullscreen properties are not required on instantiation. Radius will default to 1 and fullscreen defaults to false.