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: theHTMLImageElementor itsid.targetCanvas: theHTMLCanvasElementor itsid.radius: the radius of the blur.blurAlphaChannel: Set it totrueif 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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent