У всьому світі вже досить давно використовуються так звані Bar-коди, так-так це такі картинки з смужками різної довжини і товщини, які приклеєні до товарів в найближчому супермаркеті ^ _ ^ Взагалі, Bar-коди бувають різні, для нас же найбільш цікавим буде так званий QR-код (від Quick Response - Швидкий Відгук), найбільш широко поширився в інтернеті. Це двомірний код, на відміну від смужок на товарах, звідси його дуже важлива властивість: інформаційна ємність. Загалом, не буду цитувати википедию, кому цікаво, самі прочитають. Існує досить велика кількість способів подання QR-кодів в Web, найпоширеніші засновані на генерації картинок на стороні сервера. Однак, мої читачі знають, як мені не подобаються такі рішення.
Коротко про Bar-кодах
Існує 4 основні класи подання інформації за допомогою QR-коду. що відрізняються видом збережених даних і максимальним об'ємом:
- Тільки цифрова інформація - до 7089 цифр
- Алфавітно-цифрова інформація - до 4296 символів
- Двійкові дані (8-бітові байти) - до 2953 байт
- Кандзі / Кана - до 1817 ієрогліфів
QR-код має такі рівні корекції помилок, які характеризуються обсягом інформації для відновлення (від більшого до меншого):
Алгоритм корекції помилок заснований на коді Ріда-Соломона.
Крім того, існує кілька версій представлення даних (1-40), які відрізняє максимальний об'єм інформації і, відповідно, розмір матриці.
DataMatrix код
Це інший тип двовимірного коду, менш поширений в інтернет, але більш компактний. Код також передбачає зберігання інформації для відновлення до 30%. На відміну від QR область нанесення не обов'язково повинна бути квадратної.
Реалізація
Отже було вирішено реалізувати різні движки рендеринга Bar-кодів в залежності від підтримки на стороні клієнта тих чи інших можливостей, також підтримку різних типів кодувальників:
Як виявилося, у багатьох кривих браузерах, типу всім ненависного Internet Exploder-а і Opera не цілі пікселі працюють зовсім вже дивно, тому для сумісності розміри кожного елементіка матриці довелося округляти до меншого цілого, щоб уникнути виходу матриці за межі області. З цієї причини матрицю довелося відокремити відступами від контейнера.
Тепер реалізуємо движки-рендерер. Оскільки більш пріоритетним для нас буде використання Canvas, почнемо з нього:
Якщо Canvas не доступний, будемо тупо генерувати матрицю HTML елементами, це повільніше, але працює:
Після тестування в IE як завжди виявилося, що це там працює зовсім не так, як було задумано, тому через брак бажання розбиратися напишемо табличний движок:
Як бачите, все вийшло досить тривіально. Тільки й залишилося написати таблицю стилів:
Тут я скидаю деякі властивості на всякий випадок, ви можете цього не робити, якщо Тож усе відмінно виглядає.
Як вже було сказано вище, ми реалізуємо генерацію QR-кодів. іспрользуя кодировщик від Kazuhiko Arase. також до купи і заради прикладу додамо генератор DataMatrix кодів, це альтернатива QR-кодами, однак менш поширена на просторах інтернету і підтримувана меншим числом сканерів. В скрипті ми будемо перевіряти, чи доступний кодировщик і тільки тоді форматувати движок.
Кодувальник від Казухіко вимагає обов'язкового зазначення типу коду, тобто числа від 0 до 10, яке в сукупності з рівнем корекції помилок становить версію коду, проте різні типи коду здатні зберігати різні обсяги інформації, тому я вирішив реалізувати автоматичний підбір типу, відповідного даними, якщо тип не вказано. Отже, QR-кодер буде виглядати наступним чином:
Для кодування типом DataMatrix запозичимо алгоритм від HOUREZ Jonathan з проекту jQuery BarCode. Скрипт кодувальника з невеликими змінами буде у вкладенні, не буду приводити його тут, а код кодера приведу:
Закруглюється, точніше заквадрачіваемся
А тепер про використання отриманого у нас плагіна. Створимо файл test.html з ТАККА вмістом:
Ми показали три матриці з кодом: звичайного розміру, велику і маленьку. Пробуємо, скануємо, насолоджуємося: -]
Ну і на останок хочу сказати, що якщо під рукою девайса з камерою і читалкою кодів немає, то можна скористатися zbar -ом. Пакет є в будь-якому дистрибутиві, і в ньому представлені дві утиліти: zbarimg і zbarcam, про призначення яких, думаю, не важко отже здогадатися.
Ось, що вийшло у мене:
На цьому в принципі і все.
Про QR-код можна також почитати на сайті виробника: -]