Package Exports

stackblur-canvas

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stackblur-canvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

StackBlur.js

StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.

More informations: http://incubator.quasimondo.com/processing/fast_blur_deluxe.php
Demo: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Original source:

http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js

Getting Started

Standalone version

To use the standalone version,

download the latest zip from Github or clone the repository

git clone git@github.com:flozz/StackBlur.git

and include the dist/stackblur.js or dist/stackblur.min.js file in your HTML page:

<script src="StackBlur/dist/stackblur.js"></script>

NPM / Browserify

To use the NPM package,

install the package

npm install --save stackblur-canvas

and require it where needed

var StackBlur = require("stackblur-canvas");

Bower

To use the Bower package,

Install the package

bower install stackblur-canvas

and include the dist/stackblur.js or dist/stackblur.min.js file in your HTML page:

<script src="bower_components/stackblur-canvas/dist/stackblur.js"></script>

API

Image as source:

StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

sourceImage: the HTMLImageElement or its id.
targetCanvas: the HTMLCanvasElement or its id.
radius: the radius of the blur.
blurAlphaChannel: Set it to true if you want to blur a RGBA image (optional, default = false)

RGBA Canvas as source:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

targetCanvas: the HTMLCanvasElement.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.

RGB Canvas as source:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

targetCanvas: the HTMLCanvasElement.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.

RGBA ImageData as source:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

imageData: the canvas' ImageData.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.

RGB ImageData as source:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

imageData: the canvas' ImageData.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.

Hacking

Building

This library is built using Grunt. If you change somthing in the src/ folder, use the following command to re-build the files in the dist/ folder:

grunt

Changelog

1.2.0: Remove alerts and obsolete netscape.security.PrivilegeManager
1.1.0: Allow blur to be applied to ImageData directly (thanks @WebSeed)
1.0.0: First Release