mcnaveen / blurhash-from-url

🦄 Simple utility to generate blurhash from Image URL

Generate Blurhash from Image URL

🦄 Simple utility to generate blurhash from Image URL

📦 Requirements

• Node.js 16X LTS or Higher 📦

✨ Installation

• Install the NPM Package with the below command:

npm install blurhash-from-url --save

(or)

• Install with Yarn:

yarn add blurhash-from-url

💡 Usage Example

• Import it in your project
• Pass the URL of the image
• Make sure to use Async/Await function

//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();

☑️ Example Output

{
  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.

async function getBlurhash() {
  const output = await blurhashFromURL("https://i.imgur.com/NhfEdg2.png", {
    size: 64,
  });
  console.log(output);
}

---

💚 Message

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

blurhash-from-url's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace dependency rollup-plugin-terser with @rollup/plugin-terser ^0.1.0
• fix(deps): update dependency image-size to v1.1.1
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency rollup to v4
• chore(deps): update dependency typescript to v5
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency sharp to ^0.32.0 [security]
• chore(deps): update dependency @types/node-fetch to v2.6.11
• chore(deps): update actions/checkout action to v3.6.0
• chore(deps): update actions/setup-node action to v3.8.2
• chore(deps): update dependency @types/sharp to ^0.32.0
• chore(deps): update dependency rollup to v2.79.1
• chore(deps): update dependency rollup-plugin-typescript2 to ^0.36.0
• chore(deps): update dependency typescript to v4.9.5
• fix(deps): update dependency node-fetch to v2.7.0
• fix(deps): update dependency blurhash to v2
• fix(deps): update dependency node-fetch to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/test.yml

• actions/checkout v3.0.0
• actions/setup-node v3.0.0

npm

package.json

• blurhash ^1.1.5
• image-size ^1.0.2
• node-fetch 2.6.7
• sharp ^0.30.7
• @types/node-fetch ^2.6.2
• @types/sharp ^0.30.5
• gacp ^3.0.3
• rimraf ^3.0.2
• rollup ^2.78.1
• rollup-plugin-terser ^7.0.2
• rollup-plugin-typescript2 ^0.34.0
• typescript ^4.8.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Vite Issue

I'm trying to use the blurHashFromUrl in my React project, bootstrapped with Vite. I'm using TypeScript also. But every time I use the blurHashFromUrl, my navigator show me the following error:

This is the code:

import React, { useState, useLayoutEffect } from 'react';
import { Blurhash } from 'react-blurhash';
import { blurhashFromURL } from 'blurhash-from-url';

type LazyImageProps = {
  src: string;
  alt: string;
  className: string;
};

export default function LazyImage({ src, alt, className }: LazyImageProps) {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [hashedImage, setHashedImage] = useState('');

  useLayoutEffect(() => {
    const img = new Image();

    const hash = async () => {
      const result = await blurhashFromURL(src);
      setHashedImage(result.encoded);
    };

    hash();

    img.onload = () => setImageLoaded(true);
    img.src = src;
  }, [src]);

  return (
    <>
      {imageLoaded ? (
        <img src={src} alt={alt} loading="lazy" className={className} />
      ) : (
        <Blurhash
          hash={hashedImage}
          width={200}
          height={200}
          resolutionX={32}
          resolutionY={32}
          punch={1}
        />
      )}
    </>
  );
}