Разработка генератора стилизованных QR-кодов

QR-код представляет собой двумерный штрих-код. В стандартном виде такой штрих-код использовать на сайте сложно, поскольку он будет отличаться от дизайна. В этой статье мы опишем алгоритм, который позволит вам сделать QR-код более выразительным, уникальным.

Почему QR-код?

QR-коды обладают целым рядом преимуществ:

  1. Компактность.
  2. Независимость от ориентации. Три маркера, которые находятся в углах QR-кода, помогают считывающему устройству определить ориентацию.
  3. Коррекция ошибок. Хранящаяся в QR-коде информация дублируется (от 5 до 30%). Поэтому даже если QR-код был поврежден, вся исходная информация может быть восстановлена.
  4. Возможность хранить произвольные данные. Список поддерживаемых форматов ограничен только тем, что поддерживает считывающее устройство.

Как стилизовать QR-код?

Вот так выглядит стандартный QR-код:

Пример обычного QR-кода

И к нему можно применить стили. То есть мы можем задать фоновый цвет или картинку всему QR-коду или изменить его элементы. Мы также можем применить пользовательский стиль для угловых маркеров и для маленького блока QR-кода, а также вставить логотип. Все это осуществляется за счёт алгоритма коррекции ошибок. Пока стилизация QR-кода не превышает возможностей алгоритма коррекции ошибок, QR-код будет распознаваться любым считывающим устройством. Таким образом, чем больше данных для коррекции ошибок заложены в QR-коде, тем больше преобразований мы можем применить к нему. Достаточно сложно предсказать границу, когда QR-код становится нечитаемым. Это может быть определено только считывающим устройством.

В качестве примера создаем вот такой QR-код:

Каков алгоритм стилизации QR-кодов?

Алгоритм, который позволяет стилизовать QR-код, описываем более подробно ниже. Чтобы создать генератор стилизованных QR-кодов, мы берем обычный генератор QR-кодов, который создает стандартные QR-коды (пример таких вы могли видеть выше). Затем мы разбиваем QR-код на 4 слоя:

  1. Фон
  2. Рисунок, содержащий в себе основную информацию QR-кода
  3. Шаблон для основного содержимого QR-кода
  4. Передний план, который включает в себя угловые маркеры и накладные рисунки.

Генератор QR-кодов создает все 4 слоя по отдельности, затем объединяет их в один завершенный QR-код. В первую очередь мы создаем рисунок переднего плана :

Стилизация QR-кода: рисунок переднего плана

После этого мы создаем рисунок, содержащий в себе основную информацию QR-кода:

Стилизация QR-кода: рисунок с информацией

Шаблон QR-кода – это всего лишь QR-код без угловых маркеров, где мы можем использовать какой-либо рисунок вместо каждого блока. Например, вот этот:

Стилизация QR-кода: шаблон

И получаем следующее:

Стилизация QR-кода: применен шаблон

Объединение шаблона рисунка и рисунка с основной информацией QR-кода дает вот такой результат:

Стилизация QR-кода: применен шаблон и рисунок с информацией

Объединяя предыдущий рисунок и элементы на переднем плане, получаем практически завершенный QR-код:

Стилизация QR-кода: фон

Осталось только добавить фоновый рисунок, который создаем отдельно:

Стилизация QR-кода: шаблон, рисунок с информацией и фон

И финальный этап: соединяем последних два рисунка:

Стилизация QR-кода: результат

Теперь мы видим законченный стилизованный QR-код.

На этом примере видно, что данный алгоритм позволяет применять различные стили и изменять/модифицировать их в соответствии с требованиями заказчиков. Здесь используются простые операции по отдельным слоям, а затем происходит их объединение. Используя этот алгоритм, мы можем создавать  QR-код, который легко интегрируется в любой дизайн. Использование логотипа вашей компании в QR-коде также ярко выделит его.

Для разработки генератора QR-кодов мы использовали решение с открытым исходным кодом. Мы изменяли изображения и создавали градиенты и шаблоны, используя библиотеку AForge.

Будь ярким! Отличайся! 🙂