createPngDataUri

Creates a PNG data URI from a BlurHash string for server-side rendering.

Example

import { createPngDataUri } from 'unlazy/blurhash'

const blurhash = 'LKO2:N%2Tw=w]~RBVZRi};RPxuwH'
const pngDataUri = createPngDataUri(blurhash, {
  ratio: 16 / 9,
  size: 32
})

Use the result as the src attribute of an <img> element:

<img :src="pngDataUri">

Type Declarations

export interface BlurHashOptions {
  /**
   * Aspect ratio (width / height) of the BlurHash image to be decoded.
   *
   * @default 1 (square aspect ratio)
   */
  ratio?: number

  /**
   * The size of the longer edge (width or height) of the BlurHash image to be
   * decoded, depending on the aspect ratio.
   *
   * @default 32
   */
  size?: number
}

export function createPngDataUri(
  hash: string,
  options?: BlurHashOptions,
): string