2012年7月23日月曜日

qrcode.jsにsvg出力機能を追加する

バーコードとsvgは相性が悪くないんじゃないかと思ってjavascriptでQRコードを出力するライブラリ「qrcode.js」にsvg出力機能を追加するコードを書いてみた.もともとビットマップ形式/table要素形式に対応していたので,svgの出力を追加するのはそれほど難しくない.
何の役に立つかは判らないけれど…

 http://www.d-project.com/qrcode/

_this.createSvgTag = function(cellSize, margin){
 var count = _this.getModuleCount();
 cellSize = cellSize || 2;
 margin = margin == undefined ? cellSize * 4: margin;
 var NS = "http://www.w3.org/2000/svg";   
 
 var div = document.createElement("div");
 var svg = document.createElementNS(NS, "svg");
 svg.setAttribute("width", cellSize*count);
 svg.setAttribute("height", cellSize*count);
 svg.setAttribute("viewBox", [0, 0, count, count].join(","));
 svg.setAttribute("shape-rendering", "crispEdges");
 svg.setAttribute("style", "margin:" + margin + "px;");
 div.appendChild(svg);
 
 var tmpl = document.createElementNS(NS, "rect");
 var rect;
 var FILL = "fill", BLACK = "black", WHITE = "white";
 for(var j=0; j<count; j++){
  for(var i=0; i<count; i++){
   rect = tmpl.cloneNode();
   rect.style.setProperty(FILL, _this.isDark(j, i) ? BLACK : WHITE);
   rect.x.baseVal.value = i;
   rect.y.baseVal.value = j;
   rect.width.baseVal.value = 1;
   rect.height.baseVal.value = 1;
   svg.appendChild(rect);
  }
 }
 return div.innerHTML;
};
このコードを_this.createTableTagメソッドと同じ階層にコピペするだけ.ぶっちゃけもともと2次元配列を白に塗るか黒に塗るかの処理だけなのでどうとでもなる.なお単一のパスとしたほうが良いのかについてはよくわからない.

0 件のコメント:

コメントを投稿