Матричный код. Все о двухмерных штрихкодах. Как создать хорошо читаемый код

Во всём мире уже довольно давно используются так называемые Bar-коды, да-да это такие картинки с полосочками разной длины и толщины, которые приклеены к товарам в ближайшем супермаркете ^_^ Вообще, Bar-коды бывают разные, для нас же наиболее интересным будет так называемый QR-код (от Quick Response - Быстрый Отклик), наиболее широко распространившийся в интернете. Это двухмерный код, в отличии от полосочек на товарах, отсюда его очень важное свойство: информационная ёмкость. В общем, не буду цитировать википедию, кому интересно, сами прочитают. Существует достаточно большое число способов представления QR-кодов в Web, самые распространённые основаны на генерации картинок на стороне сервера. Однако, мои читатели знают, как мне не нравятся такие решения.

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

Используется для применений с механическим напряжением. Код использует небольшие круговые символы, и весь код выглядит как круг с концентрическими кругами, на которых находятся отдельные метки. Его пригодность предопределяет его использование, поскольку он подходит главным образом для блестящих, изогнутых металлических поверхностей, таких как хромированные и нержавеющие материалы, главным образом в хирургии.

Кратко о Bar-кодахQR-код

Существует 4 основных класса представления информации посредством QR-кода , отличающиеся видом хранимых данных и максимальным объёмом:

• Только цифровая информация - до 7089 цифр
• Алфавитно-цифровая информация - до 4296 символов
• Двоичные данные (8-битные байты) - до 2953 байт
• Кандзи/Кана - до 1817 иероглифов

QR-код имеет следующие уровни корекции ошибок, характеризующиеся объёмом информации для восстановления (от большего к меньшему):

Код визуально очень интересен и состоит из отдельных 6 стен с запатентованными дополнительными границами, которые печатаются индивидуально или группами. Преимуществом является запись до 100 символов и может быть прочитана на расстоянии 50 метров. Его оптимизация позволяет читать на больших расстояниях и при различных условиях освещения.

Такое основное применение было отслеживать движение резки древесины. Определенный г-н Энди Лонгакр в Год Один из его преимуществ - использование общественного достояния. Его функции легко распечатываются и также декодируются, потому что символы квадратные в квадратной сетке с квадратным фокусом в середине символа. При печати символа для символа не требуется никаких белых границ. 32 измерения полностью определены, и пользователь может выбрать код ошибки Рида Соломона в диапазоне от 5% до 95% области данных.

• H(igh) - 30%
• Q(uality) - 25%
• M(edium) - 15%
• L(low) - 7%

Алгоритм коррекции ошибок основан на коде Рида-Соломона .

Кроме того, существует несколько версий представления данных (1-40), которые отличает максимальный объём хранимой информации и, соответственно, размер матрицы.

DataMatrix код

Это другой тип двумерного кода, менее распространённый в интернет, но более компактный. Код также предусматривает хранение информации для восстановления до 30%. В отличии от QR область нанесения не обязательно должна быть квадратной.

Рекомендуемый уровень составляет 23% пространства данных плюс 3 кодовых слова. Другим преимуществом является возможность кодирования двух слов за пределами области данных. Другими словами, символы одиночного и двойного слоя используют 6-битные кодовые слова для исправления ошибок, а 8-битные кодовые слова используются для исправления ошибок для двух - и трехслойных символов.

Хотя 4-х слотовые символы содержат 76-битовое кодирование слов, не более 64 из них могут быть словами данных. Пространство сохраняется путем удаления одного набора колец шаблона поиска, который устраняет опорную сеть и использует режим короткие сообщений, который ограничивает четыре символа на уровне данных; в противном случае правила кодирования обычно такие же, как и для стандартного кода ацтек. Маленькие ацтекские символы полностью совместимы со стандартными символами ацтеков, поэтому эти два типа могут использоваться в приложениях вместе.

Итак, приступим

Мне конечно же не хотелось писать реализацию алгоритма генерации кодов, поэтому погуглив, нашел вполне подходящую реализацию кодирования на JavaScript от Kazuhiko Arase http://www.d-project.com/qrcode/index.html . Здесь реализован только один тип кодирования: 8-битными байтами, то есть любые данные разбираются как есть на байты, в этом же виде они считываются сканнерами. Такми образом мы можем кодировать любую строку в юникоде и любой вменяемый сканнер должен правильно её декодировать. Кроме того в данной реализации поддержка стандарта осуществлена до версии 10 включительно.

Существует четыре возможных размера небольшого ацтекского кода. Таким образом, малый ацтекский код ограничен кодированием 512 бит данных. Он был представлен г-ном Хайнрихом Оельманом и первоначально был создан из кодового кода. Другими словами, каждая строка может содержать различное количество символов.

Каждый символ имеет группу начала и конца столбцов, которые расширяют высоту символа. Каждая строка содержит двухсимвольный маркер строки, а в последней строке - необязательный контрольный символ. Например, максимальная плотность данных составляет 56 буквенно-цифровых символов на квадратный дюйм с символом размером около 7, 5 миллиметров и отношением полосы от 2 до. Большим преимуществом кода является его читаемость с помощью лазерных сканеров с небольшими изменениями. Кодаблок был взят за германский банк крови, чтобы определить кровь.

Немного погодя мне попался jQuery плагин , основаный на этой разработке доблестного японца https://github.com/jeromeetienne/jquery-qrcode . Но представление в нём было реализовано исключительно посредством Canvas , а суровые разработчики обязаны писать кросс-браузерно там, где это только возможно.

С DataMatrix кодами всё остояло сложнее, пока мне не попался jQuery плагин BarCode http://barcode-coder.com/en/barcode-jquery-plugin-201.html , который как раз таки содержал кодировщик DataMatrix от HOUREZ Jonathan . Однако сам по себе плагин показался мне слишком монструозным и труднорасширяемым, для того, чтобы как-то использовать его.

Использует шаблон поиска горизонтальных и вертикальных столбцов, пересекающихся в центре символа. Полные и официальные спецификации можно найти здесь. Этот человек также разработал код 128, и поэтому структура кода в основном основана на этом коде, т.е. код. Максимальная плотность маркировки составляет 208 буквенно-цифровых символов на квадратный дюйм или 417 цифр на квадратный дюйм. Затем вы создаете именованную формулу, которая возникает из-за разделения двух предыдущих частей. Код состоит из небольших символов, которые применяются на бумаге только серым цветом, которые кодируются двоичными данными, включая шаблоны синхронизации и исправление ошибок.

Реализация

Итак было решено реализовать различные движки рендеринга Bar-кодов в зависимости от поддержки на стороне клиента тех или иных возможностей, также поддержку различных типов кодировщиков:

;(function($){ var $$ = $.barcode = { defs: { // Опции по умолчанию type:false // Тип кода }, clas: "bar-code", // CSS класс conv: function(s){ // Функция преобразования строк return unescape(encodeURIComponent(s)); }, type: {}, // Типы кодов engine: {} // Рендереры }, T = function(t){ // Валидатор типа кода if(!$$.type[t]){ for(var i in $$.type){ t = i; break; } } return t; }, R = Math.floor; // Функция округления $.fn.bar_code = function(opts){ // Реализация плагина return this.each(function(){ var self = $(this); if(!self.hasClass($$.clas)){ self.addClass($$.clas); // Установка класса } var opt = $.extend(true, { // Инициализация опций width: self.innerWidth(), height: self.innerHeight(), text: self.text() }, $$.defs, opts), gene, inst, val = $$.conv(opt.text); // Преобразование данных opt.type = T(opt.type); // Init type self.empty(); if(!(gene = $$.type)){ // Нахождение кодера return; } if(!(inst = gene.init(opt, val))){ // Инициализация экземпляра кодера return; } var cnt = gene.read.call(inst), // Размеры матрицы est = [ // Размеры элемента матрицы R(opt.width/cnt), R(opt.height/cnt) ], p = { // Корректировка отступов w:opt.width-est*cnt, h:opt.height-est*cnt }; if(p.w > 0.01 || p.h > 0.01){ var cst = { // Отступы контейнера width:opt.width-p.w, height:opt.height-p.h, paddingLeft:R(0.5*p.w), paddingTop:R(0.5*p.h) }; cst.paddingRight=p.w-cst.paddingLeft; cst.paddingBottom=p.h-cst.paddingTop; self.css(cst); } for(var n in $$.engine){ // Поиск подходящего рендерера if($$.engine[n].check()){ $$.engine[n].render.call(self, function(col, row){ // Эта лямбда по сути запрашивает состояние элемента матрицы return gene.read.call(inst, col, row); }, cnt, est); break; } } }); }; /* Рендереры */ /* Типы кодов */ });

Каждая отметка может быть размером 0, 25 мм. Еще одно очень большое преимущество - возможность использовать его вместе с основным материалом, где они могут создавать логотипы на фоне текста. Он может быть скрыт в логотипе или состоянии базы математического кода, что предотвращает подделку. Комбинация, методы и тактика бесконечны и обеспечивают пользователю широкий спектр защиты. Этот код имеет несколько точек интереса, например, символизм не декодируется из одной точки, а из относительного положения, поэтому полученный код не так чувствителен к ошибкам, как ошибки печати или штрих-коды.

Как оказалось, во многих кривых браузерах, типа всем ненавистного Internet Exploder-а и Opera не целые пикселы работают совсем уж странно, поэтому для совместимости размеры каждого элементика матрицы пришлось округлять до меньшего целого, во избежание выхода матрицы за пределы области. По этой причине матрицу пришлось отделить отступами от контейнера.

Метод кодирования, и особенно его неупорядоченность или распространение данных, гарантирует, что код читается, даже если часть кода усечена! Они чаще всего используются для маркировки небольших объектов, интегральных схем и печатных схем. Это старейший двумерный символизм. И это запатентованная система кодирования и сканирования, которая позволяет печатать данные, графику и оцифрованный звук на бумаге в сжатом формате и последующем чтении с помощью компьютера. Код состоит из шаблона матрицы, содержащего очень маленькие прямоугольные черные и белые области.

Рендеринг

Теперь реализуем движки-рендереры. Поскольку более приоритетным для нас будет использование Canvas, начнём с него:

$$.engine.canvas = { check: function(){ // Проверка доступности try{ return !!window.CanvasRenderingContext2D && !!document.createElement("canvas"); }catch(e){ return false; } }, render: function(chk, cnt, est){ // Рендеринг // Для начала нам нужно получить цвета, чтобы картинка выглядела в соответствии с CSS var st = this.append("").find("span"), c = st.eq(0).css("backgroundColor"), d = st.eq(1).css("backgroundColor"), w = est.width, h = est.height; this.empty(); // А теперь инициализируем Canvas var can = this.append("").find("canvas").get(0), ctx = can.getContext("2d"); can.width = cnt*est; can.height = cnt*est; // И раскрашиваем матрицу for(var y = 0; y < cnt; y++){ for(var x = 0; x < cnt; x++){ ctx.fillStyle = chk(x, y) ? d: c; ctx.fillRect(x*est, y*est, est, est); } } } };

Кроме того, заголовок содержит подробную информацию о данных, хранящихся на ленте, таких как имя файла, размер бита, плотность записи и т.д. кодирование - это четность для каждого кодового слова. Преимуществом является печать на игольчатых, лазерных, термопереносных и струйных принтерах на бумаге, пластике, металле. Символы предназначены для идентификации объектов малых объектов и прямой маркировки с использованием технологии низкой точности.

Приложение кода предназначено для ярлыков и меток. Они также не были номером единицы распределения. Новый контрольный символ рассчитывается на основе нового кода. Высококачественный цвет штрих-кода с расширенным оборудованием для обработки изображений и вычислительной мощностью обеспечивает более высокую плотность хранения данных на аналоговых печатных носителях. Формат получается с использованием других символов штрих-кода в сочетании с несколькими цветами на символ.

Если Canvas не доступен, будем тупо генерировать матрицу HTML элементами, это медленней, но работает:

$$.engine.html = { check: function(){ return true; }, render: function(chk, cnt, est){ var tab = ""; for(var y = 0; y < cnt; y++){ for(var x = 0; x < cnt; x++){ tab += ""; } } this.append(tab).find("span").css({ width:est, height:est }); } };

После тестирования в IE как обычно оказалось, что это там работает вовсе не так, как задумывалось, поэтому за неимением желания разбираться напишем табличный движок:

Весь код состоит из блоков ячеек, которые содержат больше, чем бит информации. Это достигается за счет использования нескольких оттенков серого или цветовой гаммы, которые обычно преобразуются в оттенки серого. Обычно используется для хранения дополнительной текстовой информации на обратной стороне платежных карт или на медицинских идентификационных карточках.

Контрольная сумма рассчитывается по модулю. Каждый символ имеет 4 строки с 12 элементами. Существуют варианты с точно определенной шириной и, следовательно, намного быстрее для удобочитаемости. Код имеет следующие свойства: 35 буквенно-цифровых символов, 12 символов, 4 строки на символ, 8 пробелов на символ, символ синхронизации включен для первого элемента каждого символа. Теги синхронизации позволяют выполнять самосинхронизацию.

$$.engine.table = { check: function(){ return true; //$.browser.msie; }, render: function(chk, cnt, est){ var tab = ""; for(var y = 0; y < cnt; y++){ tab += ""; for(var x = 0; x < cnt; x++){ tab += ""; } tab += ""; } this.append("

"+tab+"").find("table").css({ width:est*cnt, height:est*cnt }).find("td").css({ width:est, height:est }); } };

Как видите, всё получилось достаточно тривиально. Только и осталось написать таблицу стилей:

Точка фокусировки читателя - это фокус, бычий глаз. Шестиугольники расположены вокруг круговой точки и могут быть черными, белыми или серыми. Емкость кодирования составляет 596 бит. Символы позволяют сохранять 150 бит, 250 буквенно-цифровых символов или 360 цифровых цифр, благодаря 3 режимам сжатия - для данных, текста, цифр.

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

Bar-code{ /* Контейнер */ overflow: hidden; margin: 10px; padding: 0; width: 100px; height: 100px; background: #fff; /* Фоновый цвет. Если у вас сплошная заливка, можно это свойство не задавать */ } .bar-code *{ /* Все элементы по-умолчанию */ display: inline-block; float: left; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .bar-code .dark{ /* Затемнённые элементы */ background: #000; /* Можно задать любой цвет, главное чтобы он хорошо отличался от фонового, экспериментируйте */ }

Он используется для кодирования не только обычного текста, но и графики или специальных инструкций программирования для настройки и т.д. размер файла данных может быть до 1, 1 кБ. Примеры использования могут включать в себя множество удостоверений личности, водительские права или медицинскую диагностику диагноза пациентов. Фармакод используется для контроля онлайн-безопасности в процессе фармацевтической упаковки. Большой допуск печати не влияет на читаемость штрих-кода.

Одним из многих преимуществ этого кода является кодирование японских кандзи и Кана. Вы можете найти более подробную информацию здесь: здесь. Это Ацтекский код, но это его меньшая версия. Он предназначен для кодирования более коротких сообщений до 95 символов. С другой стороны, экономия места была достигнута главным образом за счет ограничения кода, но декодирование такое же, как и со стандартным кодом, поэтому часто можно встретить путаницу этих кодов.

Тут я сбрасываю некоторые свойства на всякий случай, вы можете этого не делать, если итак всё отлично выглядит.

Кодеры

Как уже было сказано выше, мы реализуем генерацию QR-кодов , испрользуя кодировщик от Kazuhiko Arase , также до кучи и ради примера добавим генератор DataMatrix кодов, это альтернатива QR-кодам, однако менее распространённая на просторах интернета и поддерживаемая меньшим числом сканнеров. В скрипте мы будем проверять, доступен ли кодировщик и только тогда инициализировать движок.

Он подходит для передачи факса или декодирования с бумаги. Это квадратный массив с дискретными точками, что-то похожее на Точный код Филиппа. Выбираемый пользователем уровень самовосстановления позволяет читаемость поврежденного символа до 40% площади. Чаще всего код используется в медицине и применяется на поверхности многими методами печати. Символы используют структуру кадра, отличную от структуры многострочного символа. Указанная точность в горизонтальном расположении символов в пакете, но есть гораздо большая свобода размещения пакетов по горизонтали и вертикали, чем многорядные символы.

Кодировщик от Казухико требует обязательного указания типа кода, то есть числа от 0 до 10, которое в совокупности с уровнем коррекции ошибок составляет версию кода, однако разные типы кода способны хранить разные объёмы информации, поэтому я решил реализовать автоматический подбор типа, соответствующего данным, если тип не указан. Итак, QR-кодер будет выглядеть следующим образом:

Таким образом, последовательность кодовых слов не учитывает, как размещаются кадры, что делает ненужным использование прямоугольной формы, и пакеты также могут не быть смежными. Алгоритм Рида Соломона используется для исправления ошибок, и пользователю предлагается выбор из одной из 32 исправленных ошибок. Это код, разработанный для телекоммуникационной отрасли.

Символ состоит из полос переменной длины, состоящих из пикселей некритической ширины. Код включает числовые и буквенно-цифровые режимы с расширенными языковыми мерами локализации и дополнительными уровнями коррекционной коррекции в соответствии с коррекцией Рида Соломона. Поддерживаются как черно-белые, так и высокоплотные цвета. Символизм включает пары вертикальных столбцов с 7 монохромными или 8 цветными ячейками для декодирования каждой информации, такой как местоположение набора символов, одна из 43 групп языковых наборов.

If(window.QRCode){ $$.defs.QR = { // Значения опций по умолчанию level: "H", // Уровень по умолчанию type: 0 // Тип по умолчанию // 1..10 // моё расширение: 0 or null - автовыбор }; var QRAutoType = function(val, errorCorrectLevel){ // Автоматический выбор подходящего типа for(var typeNumber = 1; typeNumber