Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Fast and almost Gaussian blur

Resources

License

Packages

No packages published
You can’t perform that action at this time.