VueCraft NPM

Рисование в canvas ​

Хелперы из hazehash/canvas декодируют хеш и кладут результат в canvas. Им нужен ImageData, поэтому они работают в браузере, в воркере с OffscreenCanvas или в любой среде, где он есть. Модуль добавляет около 0,05 КБ gzip поверх декодера.

ts
import { drawToCanvas, toImageData } from 'hazehash/canvas'

Рисование плейсхолдера ​

drawToCanvas(hash, canvas, options?)

Декодирует хеш и рисует его в canvas, предварительно меняя размер canvas под размер превью. После этого у canvas пиксельный размер превью (32×25 для размера по умолчанию и хеша 13:10), поэтому растяните его через CSS на размер рамки картинки. Ничего не возвращается.

ts
import { drawToCanvas } from 'hazehash/canvas'

drawToCanvas(hash, document.querySelector('canvas') as HTMLCanvasElement)
css
.frame {
  position: relative;
  overflow: hidden;
}

.frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

hash ​

string | Uint8Array

Хеш для отрисовки.

canvas ​

CanvasLike

HTMLCanvasElement или OffscreenCanvas. Тип описывает небольшую поверхность, общую для обоих:

ts
interface CanvasLike {
  width: number
  height: number
  getContext(type: '2d'): { putImageData(data: ImageData, x: number, y: number): void } | null
}

Если getContext('2d') возвращает null, размер canvas меняется, а сам он остаётся пустым.

options ​

DecodeOptions · необязательно

Те же size и dither, что и у decode().

Получение ImageData ​

toImageData(hash, options?)

ImageData

Декодирует хеш в объект ImageData, не трогая canvas, для случая, когда вы рисуете сами: через createImageBitmap(), в управляемый вами canvas или в текстуру WebGL. Буфер пикселей это копия, которую принимает ImageData.

ts
import { toImageData } from 'hazehash/canvas'

const image = toImageData(hash, { size: 64 })
context.putImageData(image, 0, 0)

До выполнения скрипта ​

Canvas рисуется только когда выполняется JavaScript, поэтому сначала задайте рамке цвет и форму по заголовку. Это дёшево и работает и на сервере:

ts
import { getAspectRatio, getAverageColor } from 'hazehash'

const { r, g, b } = getAverageColor(hash)
frame.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
frame.style.aspectRatio = String(getAspectRatio(hash))

В Vue именно так и работает <PlaceholderImage>, а canvas он рисует после монтирования.