https://github.com/mcnaveen/blurhash-from-url

🦄 Simple utility to generate blurhash from Image URL
https://github.com/mcnaveen/blurhash-from-url

blurhash nextjs nodejs npm npm-package plaiceholder react

Last synced: about 1 month ago
JSON representation

🦄 Simple utility to generate blurhash from Image URL

• Host: GitHub
• URL: https://github.com/mcnaveen/blurhash-from-url
• Owner: mcnaveen
• Created: 2022-08-25T06:54:55.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-28T04:50:38.000Z (about 2 months ago)
• Last Synced: 2024-10-28T08:04:47.097Z (about 2 months ago)
• Topics: blurhash, nextjs, nodejs, npm, npm-package, plaiceholder, react
• Language: JavaScript
• Homepage: https://npmjs.com/package/blurhash-from-url
• Size: 102 KB
• Stars: 17
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Generate Blurhash from Image URL

:unicorn: Simple utility to generate blurhash from Image URL

![Test](https://github.com/mcnaveen/blurhash-from-url/workflows/Test/badge.svg)

![Downloads this Week](https://img.shields.io/npm/dw/blurhash-from-url)

![Bundle Size](https://img.shields.io/bundlephobia/min/blurhash-from-url)

![Version](https://img.shields.io/npm/v/blurhash-from-url)

![Blurhash from URL](./image/cover.png)

### :package: Requirements

- Node.js 16X LTS or Higher 📦

### :sparkles: Installation

- Install the NPM Package with the below command:

```

npm install blurhash-from-url --save

```

(or)

- Install with Yarn:

```

yarn add blurhash-from-url

```

### :bulb: Usage Example

- Import it in your project

- Pass the URL of the image

- Make sure to use Async/Await function

```javascript

//ES6 Import

import { blurhashFromURL } from "blurhash-from-url";

// Commonjs Import

// const { blurhashFromURL } = require("blurhash-from-url");

async function getBlurhash() {

  const output = await blurhashFromURL("https://i.imgur.com/NhfEdg2.png");

  console.log(output);

}

getBlurhash();

```

### :ballot_box_with_check: Example Output

```json

{

  encoded: 'UnR.*,kW.TnPt7WBocozpJV@nMkWadofWCV@',

  decoded: Uint8ClampedArray(1440000) [

    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,

    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,

    255, 255, 251, 255, 255, 255, 251, 255, 255, 255, 251, 255,

    255, 255, 251, 255, 255, 255, 250, 255, 255, 255, 250, 255,

    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,

    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,

    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,

    255, 255, 250, 255, 255, 255, 250, 255, 255, 255, 250, 255,

    255, 255, 250, 255,

    ... 1439900 more items

  ],

  width: 600,

  height: 600

}

```

### Optional Size Parameter

By default, the image is resized to 32x32. You can pass the size as an optional parameter.

```javascript

async function getBlurhash() {

  const output = await blurhashFromURL("https://i.imgur.com/NhfEdg2.png", {

    size: 64,

  });

  console.log(output);

}

```

---

#### :green_heart: Message

I hope you find this useful. If you have any questions, please create an issue.