Fast Gaussian Blur For Canvas – StackBlur.js

StackBlur.js is a  standalone JavaScript library that applies Gaussian blur effects to elements using HTML5 canvas.

Installation:

# Yarn
$ yarn add stackblur-canvas
# NPM
$ npm install stackblur-canvas --save

How to use it:

Add the StackBlur.js JavaScript library into your html page.

<script src="dist/stackblur.js"></script>

Apply the Gaussian blur effect to an image.

// 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)
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

Apply the Gaussian blur effect to an RGBA Canvas.

// 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.
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

Apply the Gaussian blur effect to an RGB Canvas.

// 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.
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

Apply the Gaussian blur effect to an RGBA ImageData.

// 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.
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

Apply the Gaussian blur effect to an RGB ImageData.

// 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.
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

Changelog:

02/17/2021

• v2.5.0