Fast and almost Gaussian blur by Mario Klingemann
npm install stackblur-canvas![NPM Version][pkg-npm]

StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.
* More informations:
* Algorithm:
* Demo:
Original source:
*
To use the standalone version,
download the [latest zip][dl-zip-master] 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:
`html`
To use the [NPM package][pkg-npm],
install the package:
``
npm install --save stackblur-canvas
and require it where needed
`js`
const StackBlur = require('stackblur-canvas');
If you are only supporting modern browsers, you may use ES6 Modules directly:
`js`
import * as StackBlur from
'./node_modules/stackblur-canvas/dist/stackblur-es.min.js';
Or, if you are using Rollup in your own project, use the node-resolve plugin,
and import by just referencing the module:
`js`
import * as StackBlur from 'stackblur-canvas';
See also the docs in docs/jsdoc.
Image as source:
`js`
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:
`js`
StackBlur.canvasRGBA(targetCanvas, topX, topY, width, height, radius);
* targetCanvas: the HTMLCanvasElement.topX
* : the horizontal coordinate of the top-left corner of the rectangle to blur.topY
* : 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:
`js`
StackBlur.canvasRGB(targetCanvas, topX, topY, width, height, radius);
* targetCanvas: the HTMLCanvasElement.topX
* : the horizontal coordinate of the top-left corner of the rectangle to blur.topY
* : 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:
`js`
StackBlur.imageDataRGBA(imageData, topX, topY, width, height, radius);
* imageData: the canvas' ImageData.topX
* : the horizontal coordinate of the top-left corner of the rectangle to blur.topY
* : 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:
`js`
StackBlur.imageDataRGB(imageData, topX, topY, width, height, radius);
* imageData: the canvas' ImageData.topX
* : the horizontal coordinate of the top-left corner of the rectangle to blur.topY
* : 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.
This library is built using Rollup.
If you change something in the src/ folder, use the following commanddist/
to re-build the files in the folder:
npm run rollup`
[dl-zip-master]: https://github.com/flozz/StackBlur/archive/master.zip
[pkg-npm]: https://www.npmjs.com/package/stackblur-canvas
[grunt]: http://gruntjs.com/