illumium.org

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

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

QR-код

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

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

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

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

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

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

DataMatrix код

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

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

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

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

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

Реализация

Итак было решено реализовать различные движки рендеринга 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[opt.type])){ // Нахождение кодера
        return;
      }
      if(!(inst = gene.init(opt[opt.type], val))){ // Инициализация экземпляра кодера
        return;
      }
      var cnt = gene.read.call(inst), // Размеры матрицы
      est = [ // Размеры элемента матрицы
        R(opt.width/cnt[0]),
        R(opt.height/cnt[1])
      ], p = { // Корректировка отступов
	w:opt.width-est[0]*cnt[0],
	h:opt.height-est[1]*cnt[1]
      };
      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;
	}
      }
    });
  };

  /* Рендереры */

  /* Типы кодов */
});

Как оказалось, во многих кривых браузерах, типа всем ненавистного 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('<span></span><span class="dark"></span>').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('<canvas>').find('canvas').get(0), ctx = can.getContext('2d');
      can.width = cnt[0]*est[0];
      can.height = cnt[1]*est[1];
      // И раскрашиваем матрицу
      for(var y = 0; y < cnt[1]; y++){
        for(var x = 0; x < cnt[0]; x++){
          ctx.fillStyle = chk(x, y) ? d : c;
          ctx.fillRect(x*est[0], y*est[1], est[0], est[1]);
        }
      }
    }
  };

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

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

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

  $$.engine.table = {
    check: function(){
      return true; //$.browser.msie;
    },
    render: function(chk, cnt, est){
      var tab = '';
      for(var y = 0; y < cnt[1]; y++){
        tab += '<tr>';
        for(var x = 0; x < cnt[0]; x++){
          tab += '<td'+(chk(x, y)?' class="dark"':'')+'></td>';
        }
        tab += '</tr>';
      }
      this.append('<table>'+tab+'</table>').find('table').css({
        width:est[0]*cnt[0],
        height:est[1]*cnt[1]
      }).find('td').css({
        width:est[0],
        height:est[1]
      });
    }
  };

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

.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; /* Можно задать любой цвет, главное чтобы он хорошо отличался от фонового, экспериментируйте */
}

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

Кодеры

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

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

  if(window.QRCode){
    $$.defs.QR = { // Значения опций по умолчанию
      level: 'H', // Уровень по умолчанию
      type: 0 // Тип по умолчанию
      // 1..10
      // моё расширение: 0 or null - автовыбор
    };
    var QRAutoType = function(val, errorCorrectLevel){
      // Автоматический выбор подходящего типа
      for(var typeNumber = 1; typeNumber <= 10; typeNumber++){
        var dataList = [new QR8bitByte(val)],
        buffer = new QRBitBuffer(),
        rsBlocks = QRRSBlock.getRSBlocks(typeNumber, errorCorrectLevel),
        totalDataCount = 0;
        for(var i = 0; i < dataList.length; i++){
	  var data = dataList[i];
	  buffer.put(data.mode, 4);
	  buffer.put(data.getLength(), QRUtil.getLengthInBits(data.mode, typeNumber));
	  data.write(buffer);
        }
        for (var i = 0; i < rsBlocks.length; i++) {
	  totalDataCount += rsBlocks[i].dataCount;
        }
        if(buffer.getLengthInBits() <= totalDataCount * 8){
	  return typeNumber;
        }
      }
      return 10;
    };
    $$.type.QR = {
      init: function(opt, val){
        if(typeof opt.level == 'string'){
          opt.level = QRErrorCorrectLevel[opt.level];
        }
        if(typeof opt.level != 'number'){
          opt.level = QRErrorCorrectLevel[$$.defs.QR.level];
        }
        if(typeof opt.type != 'number' || opt.type < 1 || opt.type > 10){ // Автоматический выбор подходящего типа
	  opt.type = QRAutoType(val, opt.level);
        }
        var qrc = new QRCode(opt.type, opt.level); // Экземпляр кодировщика
        try{
	  qrc.addData(val); // Скармливаем данные
	  qrc.make();
        }catch(err){
	  return false;
        }
        return qrc;
      },
      read: function(col, row){
        if(arguments.length == 2){
          return this.isDark(row, col);
        }
        var cnt = this.getModuleCount();
        return [cnt, cnt];
      }
    };
  }

Для кодирования типом DataMatrix позаимствуем алгоритм от HOUREZ Jonathan из проекта jQuery BarCode. Скрипт кодировщика с небольшими изменениями будет во вложении, не буду приводить его здесь, а код кодера приведу:

  if(window.DataMatrix){
    $$.defs.DM = { // Значения опций по умолчанию
      rect: false // Область
    };
    $$.type.DM = {
      init: function(opt, val){
        var dmc = DataMatrix.getDigit(val, opt.rect);
        return dmc;
      },
      read: function(col, row){
        if(arguments.length == 2){
          return this[row][col];
        }
        return [this.length?this[0].length:0, this.length];
      }
    };
  }

Закругляемся, точнее заквадрачиваемся

А теперь об использовании получившегося у нас плагина. Создадим файл test.html с такким содержимым:

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
  @import url(jquery.bar-code.css);
  .bar-code.tiny{
    width:50px;
    height:50px;
  }
  .bar-code.huge{
    width:200px;
    height:200px;
  }  #qr-code, #dm-code{
    float:left;
  }
  </style>
  <script src="jquery-1.6.1.min.js"></script>
  <script src="qrcode.js"></script>
  <script src="dmcode.js"></script>
  <script src="jquery.bar-code.js"></script>
  <script>
  $(function(){
    $('#qr-code .bar-code').bar_code({
      type:'QR'
      QR:{ // Опции для QR-кодера
        level:'Q'
      }
    });
    $('#dm-code .bar-code').bar_code({
      type:'DM'
    });
  });
  </script>
  <title>jQuery Bar-Code test</title>
 </head>
 <body>
  <h1>jQuery Bar-Code test</h1>
  <div id="qrcode">
   <div class="barcode">Hello world!</div>
   <div class="barcode huge">Привет, мир!</div>
   <div class="barcode tiny">http://illumium.org/</div>
  </div>
  <div id="dmcode">
   <div class="barcode">Hello world!</div>
   <div class="barcode huge">Привет, мир!</div>
   <div class="barcode tiny">http://illumium.org/</div>
  </div>
 </body>
</html>

Мы показали три матрицы с кодом: обычного размера, большую и маленькую. Пробуем, сканируем, наслаждаемся :-]

Ну и на последок хочу сказать, что если под рукой девайса с камерой и читалкой кодов нет, то можно воспользоваться zbar-ом. Пакет есть в любом дистрибутиве, и в нём представлены две утилиты: zbarimg и zbarcam, о назначении которых, думаю, не трудно итак догадаться.

Вот, что получилось у меня:

На этом в принципе и всё.

Про QR-код можно также почитать на сайте производителя :-]