VueCraft NPM

Рендер Blurhash в canvas ​

useBlurhash(options) — composable, декодирующий строку BlurHash в настоящий, прикреплённый к DOM <canvas> внутри onMounted. Это самостоятельный публичный API для headless-сценариев, которым нужен именно рисуемый <canvas> — VImage строит свой собственный blurhash-плейсхолдер другим способом (см. Плейсхолдер 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 остаётся пустым вместо выброса исключения.