# next-blurhash-blurdataurl

> Easily convert provided image to both - blurhash and blurDataURL

Latest version **0.0.4** (published 2023-07-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install next-blurhash-blurdataurl
pnpm add next-blurhash-blurdataurl
yarn add next-blurhash-blurdataurl
bun add next-blurhash-blurdataurl
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-07-18 |
| First published | 2023-07-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 41.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | chrxmvtik |
| Maintainers | chrxmvtik |
| Keywords | next, blurhash, blurdataurl, image, blur, hash |

## Links

- npm: https://www.npmjs.com/package/next-blurhash-blurdataurl
- Repository: https://github.com/chrxmvtik/next-blurhash-blurdataurl
- Homepage: https://github.com/chrxmvtik/next-blurhash-blurdataurl#readme
- Issues: https://github.com/chrxmvtik/next-blurhash-blurdataurl/issues
- npm.io page: https://npm.io/package/next-blurhash-blurdataurl

## Dependencies (3)

- [blurhash](https://npm.io/package/blurhash.md) ^2.0.5
- [@types/node](https://npm.io/package/@types/node.md) ^20.4.2
- [skia-canvas](https://npm.io/package/skia-canvas.md) ^1.0.1

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2023-07-18
- 0.0.3 — 2023-07-16
- 0.0.2 — 2023-07-15
- 0.0.1 — 2023-07-15

## README

# next-blurhash-blurdataurl

Easily convert image from url to both - blurhash and blurDataURL required in Next Image component

## Installation

Install next-blurhash-blurdata with npm

```bash
  npm install next-blurhash-blurdataurl
```

## Types

```javascript
BlurData {
    blurHash: string;
    blurDataURL: string;
}
```

```javascript
EncodingOptions {
    mimeType: "png" | "jpg" | "jpeg" | "pdf" | "svg";
    options: {
        // Page to export: Defaults to 1 (i.e., first page)
        page?: number

        // Background color to draw beneath transparent parts of the canvas
        matte?: string

        // Number of pixels per grid ‘point’ (defaults to 1)
        density?: number

        // Quality for lossy encodings like JPEG (0.0–1.0)
        quality?: number

        // Convert text to paths for SVG exports
        outline?: boolean
        };
}
```

## Usage/Examples

```javascript
generateBlurhash(imageUrl: string, encodingOptions?: EncodingOptions) => Promise<BlurData>
```

```javascript
import generateBlurhash from 'next-blurhash-blurdataurl'

/// Example using default settings (no options)

const blurhash = await generateBlurhash("https://example-image.png")

console.log(blurhash)
// blurHash: L9BWSr.A0KxbIVRPD*E20g_3_3tQ
// blurDataURL: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAA...

/// Example using options

const encodingOptions = {
    mimeType: "jpeg",
    options: {
        quality: 0.9
    }
}

const blurhashJpeg = await generateBlurhash("https://example-image.png", encodingOptions)

console.log(blurhash)
// blurHash: L9BWSr.A0KxbIVRPD*E20g_3_3tQ
// blurDataURL: data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADoAA...

// Next Image component implementation
<Image
    src="https://example-image.png"
    alt="image"
    width={200}
    height={200}
    placeholder="blur"
    blurDataURL={blurhash.blurDataURL}
/>
```

## FAQ

## Features

- Too easy to use
- Type-safe

## Feedback

If you have any feedback, feature requests or bugs, feel free to open an issue [@github](https://github.com/chrxmvtik/next-blurhash-blurdataurl/issues)

## Authors

- [@chrxmvtik](https://www.github.com/chrxmvtik)

## Related

Here are some related projects

[blurhash](https://www.npmjs.com/package/blurhash)
[skia-canvas](https://www.npmjs.com/package/skia-canvas)

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