next-blurhash-blurdataurl
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

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

  npm install next-blurhash-blurdataurl

Types

BlurData {
    blurHash: string;
    blurDataURL: string;
}
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

generateBlurhash(imageUrl: string, encodingOptions?: EncodingOptions) => Promise<BlurData>
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

Authors

Related

Here are some related projects

blurhash skia-canvas

Package Sidebar

Install

npm i next-blurhash-blurdataurl

Weekly Downloads

2

Version

0.0.4

License

ISC

Unpacked Size

42 kB

Total Files

6

Last publish

Collaborators

  • chrxmvtik