Установка

Требования

Окружение	Минимальная версия
Node.js	20+
vue	3.3+ (только для hazehash-vue)
nuxt	3.9+ (только для hazehash-nuxt)
sharp	0.33+, необязательно (чтение файлов, командная строка, хеши в Nuxt)

Декодер и энкодер не имеют зависимостей и работают в любом современном браузере, в Node.js, в Cloudflare Workers и в других средах. sharp нужен только там, где HazeHash должен прочитать файл изображения: хелпер для Node.js, команда hazehash и генерация хешей при сборке в модуле Nuxt. Для сборки репозитория из исходников нужны Node.js 22 и pnpm, но опубликованные пакеты поддерживают Node.js 20+.

Установка

npm install hazehash

Для чтения файлов изображений, команды hazehash и хелпера для Node.js добавьте sharp:

npm install --save-dev sharp

Для Vue 3 пакет hazehash-vue требует hazehash и vue как peer-зависимости:

npm install hazehash hazehash-vue

Для Nuxt пакет hazehash-nuxt тянет за собой hazehash и hazehash-vue; добавьте sharp, чтобы модуль мог генерировать хеши при сборке:

npm install hazehash-nuxt
npm install --save-dev sharp

Быстрый старт

Закодируйте изображение один раз, на сервере или при сборке, и храните только строку:

import { encodeToString } from 'hazehash/encode'

// rgba: пиксели sRGB с прямым (не premultiplied) альфа-каналом, 4 байта на пиксель
const hash = encodeToString({ data: rgba, width, height })
// "Ed7UwRWKKv5znm6a7sC1tziHDNpMuCikxrYpIg"

Декодируйте её там, где показывается картинка:

import { decode, getAverageColor } from 'hazehash'

const { width, height, data } = decode(hash) // RGBA, 32 px по длинной стороне
const { r, g, b, a } = getAverageColor(hash) // a от 0 до 1

Файлы на диске проходят через хелпер для Node.js:

import { encodeFileToString } from 'hazehash/node' // нужен sharp

const hash = await encodeFileToString('photo.jpg', { budget: 24 })

или через командную строку:

npx hazehash encode photo.jpg --budget 24

Быстрый старт: Vue

<script setup lang="ts">
import { PlaceholderImage } from 'hazehash-vue'
</script>

<template>
  <PlaceholderImage
    hash="Ed7UwRWKKv5znm6a7sC1tziHDNpMuCikxrYpIg"
    src="/photo.jpg"
    alt="Photo"
    :width="1280"
    :height="959"
  />
</template>

См. Компонент PlaceholderImage.

Быстрый старт: Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['hazehash-nuxt'],
})

<template>
  <PlaceholderImage src="/images/hero.jpg" alt="Hero" :width="1600" :height="900" />
</template>

Модуль хеширует все картинки из public при сборке, а компонент находит хеш по src. См. Модуль Nuxt.