Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/flozz/stackblur

Fast and almost Gaussian blur
https://github.com/flozz/stackblur

Last synced: 29 days ago
JSON representation

Fast and almost Gaussian blur

Host: GitHub
URL: https://github.com/flozz/stackblur
Owner: flozz
License: mit
Created: 2014-03-01T20:55:26.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2024-03-17T15:09:47.000Z (8 months ago)
Last Synced: 2024-05-15T23:48:19.575Z (6 months ago)
Language: JavaScript
Homepage:
Size: 1.01 MB
Stars: 1,256
Watchers: 21
Forks: 124
Open Issues: 9
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE-MIT.txt

Awesome Lists containing this project

README

# StackBlur.js

[![NPM Version](https://img.shields.io/npm/v/stackblur-canvas.svg)][pkg-npm]
[![License](https://img.shields.io/npm/l/stackblur-canvas.svg)](https://github.com/flozz/StackBlur/blob/master/COPYING)

StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.

* **More informations:**
* **Algorithm:**
* **Demo:**

Original source:

## Getting Started

### Standalone version

To use the standalone version,

download the [latest zip][dl-zip-master] 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:

```html

```

### Node

To use the [NPM package][pkg-npm],

install the package:

```
npm install --save stackblur-canvas
```

and require it where needed

```js
const StackBlur = require('stackblur-canvas');
```

### Browsers

If you are only supporting modern browsers, you may use ES6 Modules directly:

```js
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](https://github.com/rollup/rollup-plugin-node-resolve) plugin,
and import by just referencing the module:

```js
import * as StackBlur from 'stackblur-canvas';
```

## API

See also the docs in [docs/jsdoc](./docs/jsdoc/index.html).

**Image as source:**

```js
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:**

```js
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:**

```js
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
```

**RGBA ImageData as source:**

```js
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:**

```js
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
```

## Hacking

### Building

This library is built using [Rollup](https://rollupjs.org/guide/en).
If you change something in the `src/` folder, use the following command
to re-build the files in the `dist/` folder:

`npm run rollup`

[dl-zip-master]: https://github.com/flozz/StackBlur/archive/master.zip
[pkg-npm]: https://www.npmjs.com/package/stackblur-canvas
[grunt]: http://gruntjs.com/