# blurhash

> Encoder and decoder for the Wolt BlurHash algorithm.

Latest version **2.0.5** (published 2023-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install blurhash
pnpm add blurhash
yarn add blurhash
bun add blurhash
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; popular repo.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2023-02-17 |
| First published | 2017-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17069 |
| Author | omahlama |
| Maintainers | thisen, woltian, waha.06x36, nyde, omahlama |
| Keywords | blurhash, blur, hash, image |

## Links

- npm: https://www.npmjs.com/package/blurhash
- Repository: https://github.com/woltapp/blurhash/tree/master/TypeScript
- Homepage: https://blurha.sh/
- npm.io page: https://npm.io/package/blurhash

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.0.5 (latest) — 2023-02-17
- 2.0.4 — 2022-10-30
- 2.0.3 — 2022-10-03
- 2.0.2 — 2022-09-28
- 2.0.1 — 2022-09-27
- 2.0.0 — 2022-09-12
- 1.1.5 — 2022-02-15
- 1.1.4 — 2021-08-16
- 1.1.3 — 2019-07-31
- 1.1.2 — 2019-06-29
- 1.1.1 — 2019-06-29
- 1.1.0 — 2019-06-28
- 1.0.0 — 2019-04-25
- 0.0.1 — 2017-12-22

## README

# blurhash

[![NPM Version](https://img.shields.io/npm/v/blurhash.svg?style=flat)](https://npmjs.org/package/blurhash)
[![NPM Downloads](https://img.shields.io/npm/dm/blurhash.svg?style=flat)](https://npmjs.org/package/blurhash)

> JavaScript encoder and decoder for the [Wolt BlurHash](https://github.com/woltapp/blurhash) algorithm

## Install

```sh
npm install --save blurhash
```

See [react-blurhash](https://github.com/woltapp/react-blurhash) to use blurhash with React.

## API

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

> Decodes a blurhash string to pixels

#### Example

```js
import { decode } from "blurhash";

const pixels = decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 32);

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);
```

### `encode(pixels: Uint8ClampedArray, width: number, height: number, componentX: number, componentY: number) => string`

> Encodes pixels to a blurhash string

```js
import { encode } from "blurhash";

const loadImage = async src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (...args) => reject(args);
    img.src = src;
  });

const getImageData = image => {
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext("2d");
  context.drawImage(image, 0, 0);
  return context.getImageData(0, 0, image.width, image.height);
};

const encodeImageToBlurhash = async imageUrl => {
  const image = await loadImage(imageUrl);
  const imageData = getImageData(image);
  return encode(imageData.data, imageData.width, imageData.height, 4, 4);
};
```

### `isBlurhashValid(blurhash: string) => { result: boolean; errorReason?: string }`

```js
import { isBlurhashValid } from "blurhash";

const validRes = isBlurhashValid("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
// { result: true }

const invalidRes = isBlurhashValid("???");
// { result: false, errorReason: "The blurhash string must be at least 6 characters" }
```

---
_Source: https://npm.io/package/blurhash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._