StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.
- More informations: http://incubator.quasimondo.com/processing/fast_blur_deluxe.php
- Algorithm: https://medium.com/better-programming/blurring-image-algorithm-example-in-android-cec81911cd5e
- Demo: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Original source:
To use the standalone version,
download the latest zip from Github or clone the repository
git clone [email protected]: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>
To use the NPM package,
install the package:
npm install --save stackblur-canvas
and require it where needed
const StackBlur = require('stackblur-canvas');
If you are only supporting modern browsers, you may use ES6 Modules directly:
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:
import * as StackBlur from 'stackblur-canvas';
See also the docs in docs/jsdoc.
Image as source:
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
sourceImage
: theHTMLImageElement
or itsid
.targetCanvas
: theHTMLCanvasElement
or itsid
.radius
: the radius of the blur.blurAlphaChannel
: Set it totrue
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
: theHTMLCanvasElement
.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
: theHTMLCanvasElement
.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.
This library is built using Rollup.
If you change something in the src/
folder, use the following command
to re-build the files in the dist/
folder:
npm run rollup