QRコード生成スクリプト

JavaScriptで文字列からQRコードを作成して<canvas>に描画します。
<canvas>への描画ですので、バージョン8以下のIE等、古いブラウザには非対応です。


基本的な使い方

<canvas class="qrcode" data-str="http://web-sozai.seesaa.net/"></canvas>
<script src='qr.js'></script>
<script>
QR();
</script>

QR() を呼び出すと、 class="qrcode" の <canvas> に対して描画を行います。
data-xxx 属性を設定することでパラメーターを変更します。
属性
説明
data-str
属性値がQRコード化する文字列となります。
data-mode
0=数字,1=英数字,2=8bit (省略時は0)
コード化する文字列に非対応文字が含まれる場合は加算されます。
値が少ないほど、同じサイズのQRに入れられる文字数が増えます。
QRコードの英数字モードは小文字に対応していませんが、判定時には小文字も対象にして英数字モードが確定したら大文字変換を行っています。
英小文字を表示させたい場合は8bitモードを明示的に指定してください。
英数字モードは英数字以外に「 」「$」「%」「*」「+」「-」「.」「/」「:」に対応しています。
URLはほとんどの場合は英数字モードで問題ありませんが、大文字と小文字を区別するアドレスで問題が生じる可能性などが考えられるので8bitのほうが良いかもしれません。
data-ver
1から40までの整数 (省略時は1)
QRコードの型番(大きさ)で、1辺のマス数は「型番*4+17」となります。
データが入りきらない場合は加算されます。
大きいほど容量(文字数)が増えますが、40型近くなるとカメラでの読み取りが困難なほどの大きさになります。
data-lv
0=M,1=L,2=H,3=Q (省略時は1、LMQHかlmqhの英字1文字での指定も可)
誤り訂正レベルで、訂正レベルの強さは「L<M<Q<H」の順でLが最弱です。
Lがもっともデータ容量(文字数)が多くなりますが、リーダーで解読できない可能性が高くなります。
data-mask
0から7までの整数 (省略時はundefined)
QRコードではマスク処理により内部的に8種類のパターンが生成され最適なパターンが出力されます。
このパラメータを省略した場合は規定の計算式で最適なパターンが出力されますが、0から7までの数値で指定することが可能です。
最悪なパターンが出力されたとしても、読み取りに影響するようなことは無いと思います。
data-px
整数 (省略時は3)
1マスの大きさ(px)となります。
1pxだと細かすぎて読み取りにくいと思います。

高度な使い方

<script src='qr.js'></script>
<script>
QR_main(canvas,str,mode,ver,lv,mask,px);
</script>

QR() ではclass="qrcode"の<canvas>の属性値を QR_main() に丸投げしています。
class="qrcode"の<canvas>を使わずにスクリプトからパラメータを渡して使うような用途では QR_main() をお使いください。
戻り値として引数と同じ順番で処理済みの値を配列で返します。(即returnの場合はundefined)
変数名
説明
canvas
canvas要素必須
canvas要素が渡されなかったりcanvas非対応ブラウザの場合は即 return
str
文字列QRコード化する文字列
toString() で型変換ができる場合は変換されます。
mode
0から2の整数0=数字,1=英数字,2=8bit
数値以外が渡された場合は parseInt() で型変換を行います。
対応数値以外になった場合は0になります。
非対応文字が含まれる場合は加算されます。
ver
1から40の整数QRコードの型番(大きさ)
数値以外が渡された場合は parseInt() で型変換を行います。
対応数値以外になった場合は1になります。
データが入りきらない場合は加算されます。
lv
0から3の整数
LMQHlmqhのいずれか1文字
誤り訂正レベル
LMQHlmqhのいずれか1文字の場合は対応する数値に変換されます。
L=1,M=0,Q=3,H=2 (LMQHの順ではないことに注意)
対応文字か数値以外が渡された場合は parseInt() で型変換を行います。
対応数値以外になった場合は1になります。
mask
0から7の整数マスクパターン
数値以外が渡された場合は parseInt() で型変換を行います。
対応数値以外になった場合はundefinedになります。
undefinedとなった場合は規定の計算式で最適なマスクパターンが選択されます。
px
数値1マスの大きさ (px)
数値以外が渡された場合は parseInt() で型変換を行います。
NaNとなった場合は3になります。
正の整数を想定していますが、canvasは小数や負の整数に対応していますので、小数や負の整数を渡すことも可能です。


qr.js
posted by ST at 2015-02-15 13:02 | QRコード生成スクリプト | このブログの読者になる | 更新情報をチェックする