VueCraft NPM

Blurhash Canvas Rendering ​

useBlurhash(options) is the composable that decodes a BlurHash string into a real, DOM-attached <canvas> in onMounted. It's a standalone public API for headless setups that specifically want a real, drawable <canvas> — VImage builds its own blurhash placeholder a different way (see Blurhash placeholder).

ts
import { useBlurhash } from '@macrulez/vue-image-kit'

const canvasRef = useBlurhash({
  blurhash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
  width: 1200,
  height: 600,
})
vue
<template>
  <canvas ref="canvasRef" />
</template>

Options ​

blurhash ​

string, required. The BlurHash string to decode.

width ​

number, required. Intrinsic width of the target image — used only to derive the canvas's aspect ratio, not its pixel size.

height ​

number, required. Intrinsic height of the target image — same role as width.

Return value ​

Ref<HTMLCanvasElement | null>. Bind it to a <canvas :ref="...">. Decoding happens once, in onMounted, at a fixed internal thumbnail resolution (32px wide, height derived from the width/height aspect ratio) — CSS scales the canvas up, so decoding never costs more than a few hundred pixels regardless of the real image's size.

On the server (typeof window === 'undefined') the ref is returned immediately without running any decode logic — safe to call during SSR, the canvas simply stays empty until hydration.

An invalid blurhash string is caught silently — the canvas is left blank rather than throwing.