VueCraft NPM

Рендер Blurhash в canvas ​

useBlurhash(options) — composable, который VImage сам использует для рендера своего пропа blurhash — декодирует строку BlurHash в <canvas> внутри onMounted. Доступен напрямую для headless-сценариев, которым нужен тот же canvas-плейсхолдер без полного компонента. См. Плейсхолдер Blurhash — обзор на уровне фичи (формат, генерация, поддержка браузеров).

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

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

Опции ​

blurhash ​

string, обязателен. Строка BlurHash для декодирования.

width ​

number, обязателен. Собственная ширина целевого изображения — используется только для вычисления aspect-ratio canvas, не его пиксельного размера.

height ​

number, обязателен. Собственная высота целевого изображения — та же роль, что и у width.

Возвращаемое значение ​

Ref<HTMLCanvasElement | null>. Забиндите на <canvas ref="...">. Декодирование происходит один раз, в onMounted, при фиксированном внутреннем thumbnail-разрешении (32px по ширине, высота выводится из соотношения width/height) — CSS масштабирует canvas вверх, поэтому декодирование никогда не стоит больше пары сотен пикселей, независимо от реального размера изображения.

На сервере (typeof window === 'undefined') ref возвращается сразу, без запуска логики декодирования — безопасно вызывать во время SSR, canvas просто остаётся пустым до гидратации.

Невалидная строка blurhash перехватывается молча — canvas остаётся пустым вместо выброса исключения.