Генератор BlurHash
Превратите изображение в строку BlurHash и декодируйте любой хэш обратно в размытый предпросмотр.
Генератор BlurHash полностью работает в вашем браузере: загруженные изображения кодируются на устройстве и не отправляются.
Открыть генератор изображений-заглушек
Об инструменте Генератор BlurHash
BlurHash — это строка примерно из двадцати символов, хранящая размытую форму изображения: достаточно, чтобы показать узнаваемую заглушку, пока загружается настоящая фотография, вместо серого прямоугольника, сдвигающего вёрстку при появлении. Кодировщик проецирует изображение на небольшой набор косинусных базисных функций, квантует коэффициенты и упаковывает их в 83-ричную систему счисления, поэтому результат легко помещается в JSON рядом с URL изображения. Этот инструмент кодирует загруженное изображение, декодирует любой хэш, чтобы проверить его вид, и выдаёт готовый фрагмент кода.
Возможности
- Кодирует любой PNG, JPEG или WebP в строку BlurHash
- Компоненты от 1 до 9 по каждой оси с отображением длины строки
- Декодирует любой корректный хэш, а не только только что созданный
- Регулировка punch для усиления контраста размытия
- Средний цвет хэша, готовый для использования как фон
- Готовые фрагменты для React, HTML-атрибута и JSON-ответа
Как использовать Генератор BlurHash
- Загрузите изображение или вставьте существующий хэш для декодирования
- Настройте число компонентов — 4 × 3 подходит для большинства фотографий
- Скопируйте хэш и сохраните его рядом с URL изображения
- Возьмите фрагмент React или HTML для стороны отображения
Пример
Ввод
photo.jpg · 4 × 3 components
Результат
LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters
Двадцать восемь символов весят меньше большинства URL изображений и отображаются мгновенно, без второго запроса.
Частые ошибки и устранение неполадок
- Сохранённый хэш не декодируется. — Длина должна соответствовать числу компонентов, закодированному в первом символе: 4 + 2 × x × y. Обрезанная строка не пройдёт эту проверку.
- Заглушка совсем не похожа на изображение. — Слишком мало компонентов. Значение 1 × 1 хранит только средний цвет; 3–4 по каждой оси уже делают фотографию узнаваемой.
Часто задаваемые вопросы
- Что такое BlurHash?
- Компактная строка, кодирующая низкочастотное содержимое изображения — его размытую форму и цвета, предназначенная для хранения рядом с URL изображения.
- Какой длины строка BlurHash?
- Четыре символа плюс два на каждый компонент, поэтому хэш 4 × 3 занимает 28 символов, а 1 × 1 — 6.
- Сколько компонентов использовать?
- 4 × 3 — обычный выбор для фотографий; для портретной ориентации иногда лучше 3 × 4, а для плоской иллюстрации хватает 2 × 2.
- Загружается ли моё изображение для создания хэша?
- Нет. Изображение рисуется на canvas и кодируется в вашем браузере, поэтому фотографии никогда не покидают устройство.
Связанные инструменты
Все инструменты ArrayKit