Двопрохідне розсіювання помилок для створення зчитуваних дизерингових QR-кодів
Новий метод генерації QR-кодів використовує двопрохідне розсіювання помилок Флойд-Стейнберга для поєднання 1-бітних фотографій із модулями даних QR. Попереднє маскування обов'язкових бітів і розсіювання помилок на сусідні пікселі зберігають контрастність без порушення зчитуваності.
Вплив: Середній
Чому це важливо
Ви можете програмно генерувати естетичні брендовані QR-коди без складних дифузійних моделей чи втрати надійності сканування.
TL;DR
- 01Двопрохідний дизеринг Флойд-Стейнберга ізолює біти даних і розсіює помилки квантування перед пороговим перетворенням.
- 02Поділ модулів QR на сітку 3x3 зберігає біт даних у центрі та віддає 8 субпікселів під півтони зображення.
- 03Вимкнення інтерполяції зображень через CSS image-rendering: pixelated запобігає збоям сканування.
Ключові факти
- Структура субпікселів
- Сітка 3x3 на кожен модуль QR
- Глибина кольору
- 1-бітний монохром
- Макс. помилка квантування
- До 95% розсіяння на інвертованих модулях
- Приклад роздільної здатності
- 147x147 пікселів
Архітектура модулів дизерингових QR-кодів
QR-код складається з обов'язкових шаблонів виявлення та модулів даних. У цій реалізації кожен піксель розділяється на сітку 3x3: центральний субпіксель кодує дані, а зовнішні вісім відтворюють зображення. Звичайне одноетапне порогове перетворення створює виражений шум «сіль і перець» через випадкові біти даних.
Алгоритм двопрохідного розсіювання помилок
Щоб усунути візуальні артефакти, генератор виконує два етапи розсіювання помилок:
1. Прохід маскування даних: Попередньо встановлює центральні субпікселі у потрібний стан даних. Обчислює помилку квантування відносно вихідного зображення (до 95% у контрастних зонах) та розсіює її на вісім сусідніх субпікселів. 2. Прохід дизерингу зображення: Застосовує стандартний алгоритм Флойд-Стейнберга для решти пікселів для збереження локальної яскравості.
Вплив на сканування та CSS-форматування
При використанні таких QR-кодів необхідно зберігати поля тиші (quiet zones), колір яких протилежний до зовнішніх рамок. Для запобігання розмиттю пікселів браузером слід використовувати CSS-властивість image-rendering: pixelated.
Спробуй за 2 хвилини
img.qr-dithered {
image-rendering: pixelated;
image-rendering: crisp-edges;
}css
✓ Коли використовувати
- При створенні стилізованих брендованих QR-кодів для цифрових екранів або великих плакатів.
- Коли потрібні графічні QR-коди без використання важких нейромережевих моделей Stable Diffusion.
✕ Коли НЕ варто
- При друку малих QR-кодів на паперових флаєрах чи матеріалах, які можуть зминатися.
- Якщо сканування здійснюватиметься за умов поганого освітлення або застарілими камерами.
Що зробити сьогодні
- Додайте image-rendering: pixelated до SVG або Canvas елементів із дизеринговими QR-кодами.
- Забезпечте наявність тихих зон (quiet zones) навколо QR-коду для коректного виявлення рамок сканером.
- Протестуйте згенерований QR-код на смартфонах із слабкими камерами за умов недостатнього освітлення перед друком.
Що каже спільнота
“These are also very cool: https://antfu.me/posts/ai-qrcode Diffusion image generation constrained to also be a valid QR code”
“QR codes were made to be robust in the face of errors, but over time this has been eaten into for aesthetic purposes.”
Джерела