https://github.com/kayahr/stackblur
A fast but still good looking image blur
https://github.com/kayahr/stackblur
blur filter image imaging stackblur typescript
Last synced: 11 months ago
JSON representation
A fast but still good looking image blur
- Host: GitHub
- URL: https://github.com/kayahr/stackblur
- Owner: kayahr
- License: mit
- Created: 2024-06-04T11:48:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T17:10:00.000Z (11 months ago)
- Last Synced: 2025-04-05T16:14:22.829Z (11 months ago)
- Topics: blur, filter, image, imaging, stackblur, typescript
- Language: TypeScript
- Homepage: https://kayahr.github.io/stackblur/
- Size: 4.04 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE.md
Awesome Lists containing this project
README
StackBlur
=========
[GitHub] | [NPM] | [API Doc]
A fast almost Gaussian Blur. Based on Mario Klingemann's original [StackBlur v0.5](http://web.archive.org/web/20110707030516/http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js) from 2011 with the following changes:
* Ported to modern TypeScript.
* Converted to a NPM module.
* Fixed bit-shifting error preventing the usage of blur radius larger than 180.
* Fix problems with blur radius larger than image.
* Improved alpha channel blurring.
Usage
-----
Install the library as a dependency in your project:
```
npm install @kayahr/stackblur
```
And then use it like this:
```typescript
import { blurImageData } from "@kayahr/stackblur";
// Get image data from some canvas
// ...
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Blur image data
const radius = 10; // Valid range: 0-254
const withAlpha = false; // Optional, defaults to true
blurImageData(imageData, radius, withAlpha);
// Draw image data back onto canvas
ctx.putImageData(imageData, 0, 0);
```
The blur function itself has no dependency on `Canvas` or a real `ImageData` object. The passed image data simply must have a `data` property containing the raw RGBA pixels as a `Uint8Array` or `ClampedUint8Array` and a `width` and `height` property. So it should work fine with libraries like [node-canvas], [sharp] or [jimp].
[API Doc]: https://kayahr.github.io/stackblur/
[GitHub]: https://github.com/kayahr/stackblur
[NPM]: https://www.npmjs.com/package/@kayahr/stackblur
[node-canvas]: https://www.npmjs.com/package/canvas
[sharp]: https://www.npmjs.com/package/sharp
[jimp]: https://www.npmjs.com/package/jimp