Skip to content
Fast and almost Gaussian blur
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo - Refactoring: Remove unneeded capturing false flag Jan 31, 2020
dist - Linting (ESLint): As per latest ash-nazg Feb 5, 2020
docs - Build fix: Target 100% coverage; fixes #29 Dec 13, 2018
src - Linting (ESLint): As per latest ash-nazg Feb 5, 2020
.babelrc - Build fix: Target 100% coverage; fixes #29 Dec 13, 2018
.editorconfig - Remove relic from other project from `.editorconfig` Dec 5, 2019
.eslintignore - Breaking change: Remove now deprecated Bower Nov 5, 2018
.eslintrc.js - Linting (ESLint): As per latest ash-nazg Feb 5, 2020
.gitignore Grunt + Browserify Jul 7, 2015
.ncurc.js
.npmignore - Linting (ESLint): Switch to ash-nazg/sauron-node Dec 5, 2019
CHANGES.md - Linting (ESLint): Switch to ash-nazg/sauron-node Dec 5, 2019
LICENSE-MIT.txt
README.md - Linting (ESLint): Switch to ash-nazg/sauron-node Dec 5, 2019
index.d.ts
lgtm.yml - Linting (LGTM): Add `lgtm.yml` file to ignore `dist` Feb 12, 2020
package.json - Linting (ESLint): As per latest ash-nazg Feb 5, 2020
rollup.config.js - Linting (ESLint): Switch to ash-nazg/sauron-node Dec 5, 2019
yarn.lock - yarn: Update lock Feb 5, 2020

README.md

StackBlur.js

NPM Version License

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

Original source:

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>

Node

To use the NPM package,

install the package:

npm install --save stackblur-canvas

and require it where needed

const StackBlur = require('stackblur-canvas');

Browsers

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';

API

See also the docs in docs/jsdoc.

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 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

You can’t perform that action at this time.