Skip to content

flozz/StackBlur

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

- Build: As per latest devDeps.
- Docs: Update API docs as per latest
- npm: Switch to server without reported vulnerabilities
- npm: Switch to pnpm lock
- npm: Update devDeps (and switch to new ash-nazg peerDeps)
- npm: Bump to 2.5.0
1b85fe5

Git stats

Files

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

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

Stars

Watchers

Forks

Packages

No packages published