https://github.com/mad-gooze/fast-blurhash

Fast & tiny Wolt BlurHash decoder implementation
https://github.com/mad-gooze/fast-blurhash

blurhash fast image placeholder tiny

Last synced: 6 days ago
JSON representation

Fast & tiny Wolt BlurHash decoder implementation

• Host: GitHub
• URL: https://github.com/mad-gooze/fast-blurhash
• Owner: mad-gooze
• License: isc
• Created: 2021-03-18T20:28:49.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-02T01:16:10.000Z (6 months ago)
• Last Synced: 2025-01-18T22:35:40.085Z (13 days ago)
• Topics: blurhash, fast, image, placeholder, tiny
• Language: JavaScript
• Homepage: https://mad-gooze.github.io/fast-blurhash/
• Size: 420 KB
• Stars: 170
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fast-blurhash

[![npm](https://img.shields.io/npm/v/fast-blurhash)](https://www.npmjs.com/package/fast-blurhash)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/fast-blurhash)](https://bundlephobia.com/result?p=fast-blurhash)

> Fast & tiny [Wolt BlurHash](https://github.com/woltapp/blurhash) decoder implementation

-   🤏 **Tiny**: ≈1kb minified

-   🚀 **Fast**: up to 70% faster then [original `blurhash.decode`](https://github.com/woltapp/blurhash/tree/master/TypeScript#decodeblurhash-string-width-number-height-number-punch-number--uint8clampedarray) (see [benchmark](./benchmark.js))

[Demo](https://mad-gooze.github.io/fast-blurhash/)

## Install

```sh

npm install --save fast-blurhash

```

## API

### decodeBlurHash

`fast-blurhash` provides a drop-in replacement for [original `blurhash.decode`](https://github.com/woltapp/blurhash/tree/master/TypeScript#decodeblurhash-string-width-number-height-number-punch-number--uint8clampedarray)

```typescript

decodeBlurHash(blurhash: string, width: number, height: number, punch?: number) => Uint8ClampedArray`

```

`decodeBlurHash` uses approximate calculation for speed reasons. Results may slightly differ from original `blurhash.decode` but the diff is not noticeable (see [tests](./index.test.js)).

⚠️ `decodeBlurHash` does not validate input.

#### Example

```js

import { decodeBlurHash } from 'fast-blurhash';

// decode blurHash image

const pixels = decodeBlurHash('LEHV6nWB2yk8pyo0adR*.7kCMdnj', 32, 32);

// draw it on canvas

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

const imageData = ctx.createImageData(width, height);

imageData.data.set(pixels);

ctx.putImageData(imageData, 0, 0);

document.body.append(canvas);

```

### getBlurHashAverageColor

```typescript

getBlurHashAverageColor(blurhash: string) => [number, number, number]`

```

`getBlurHashAverageColor` returns an average color of a passed blurhash image in [red, green, blue].

#### Example

```js

import { getBlurHashAverageColor } from 'fast-blurhash';

// get image average color and use it as css background color

const rgbAverageColor = getBlurHashAverageColor('LEHV6nWB2yk8pyo0adR*.7kCMdnj');

document.body.style.backgroundColor = `rgb(${rgbAverageColor.join(',')})';

```