stackblur-canvas

WebJar for stackblur-canvas

License	MIT
GroupId	org.webjars.bower
ArtifactId	stackblur-canvas
Last Version	1.4.1
Release Date	Aug 17, 2018
Type	jar
Description	stackblur-canvas WebJar for stackblur-canvas
Project URL	http://webjars.org
Source Code Management	https://github.com/flozz/StackBlur

Download stackblur-canvas

Filename	Size
stackblur-canvas-1.4.1.pom
stackblur-canvas-1.4.1.jar	12 KB
stackblur-canvas-1.4.1-sources.jar	22 bytes
stackblur-canvas-1.4.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/stackblur-canvas/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>stackblur-canvas</artifactId>
    <version>1.4.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/stackblur-canvas/
implementation 'org.webjars.bower:stackblur-canvas:1.4.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/stackblur-canvas/
implementation ("org.webjars.bower:stackblur-canvas:1.4.1")

Apache Buildr

'org.webjars.bower:stackblur-canvas:jar:1.4.1'

Apache Ivy

<dependency org="org.webjars.bower" name="stackblur-canvas" rev="1.4.1">
  <artifact name="stackblur-canvas" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='stackblur-canvas', version='1.4.1')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "stackblur-canvas" % "1.4.1"

Leiningen

[org.webjars.bower/stackblur-canvas "1.4.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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 [email protected]: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

Versions

Version
1.4.1 Aug 17, 2018
1.2.1 Jun 21, 2016