stackblur-canvas

What is stackblur-canvas?

The stackblur-canvas npm package is a JavaScript library that provides a fast and efficient way to apply a Stack Blur effect to images on HTML5 canvas elements. It is particularly useful for creating smooth, visually appealing blur effects in web applications.

What are stackblur-canvas's main functionalities?

Apply Stack Blur to Canvas

This feature allows you to apply a Stack Blur effect to an image drawn on an HTML5 canvas element. The blur radius can be adjusted to achieve the desired level of blur.

const StackBlur = require('stackblur-canvas');
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  context.drawImage(image, 0, 0);
  StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 20);
};

Apply Stack Blur to Image Data

This feature allows you to apply a Stack Blur effect directly to the image data of a canvas element. This can be useful for more advanced image processing tasks.

const StackBlur = require('stackblur-canvas');
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  context.drawImage(image, 0, 0);
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  StackBlur.imageDataRGB(imageData, 0, 0, canvas.width, canvas.height, 20);
  context.putImageData(imageData, 0, 0);
};

Other packages similar to stackblur-canvas

blurjs

Blur.js is a jQuery plugin that allows you to apply a blur effect to elements on a webpage. Unlike stackblur-canvas, which focuses on canvas elements, blur.js can be used to blur any HTML element, making it more versatile for general web design purposes.

pixi-filters

Pixi-filters is a collection of filters for the PixiJS rendering library, including a blur filter. It is more comprehensive than stackblur-canvas, offering a variety of filters and effects for use in web-based graphics and games.

README

StackBlur.js

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:

• http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js

Getting Started

Standalone version

To use the standalone version,

download the latest zip from Github or clone the repository

git clone [e-mail]: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

Changelog

2.7.0

• fix: use unsigned right shift to fix blur radius larger than 180 #59 (@kayahr)
• chore: update build files (@kayahr)