無料ブログ「rentafree.net」の管理人ブログ

QRコード生成機能

文字列をQRコード化して<canvas>で描画する機能を用意しました。
公式JavaScriptの機能として利用できます。


使い方

<canvas data-qr="http://master.rentafree.net/"></canvas>

data-qr属性のある<canvas>タグが存在すると、公式JavaScriptのonloadイベントの際にQRコード生成スクリプトがロードされます。
QRコード生成スクリプトがロードされると、data-qr属性のある<canvas>にQRコードを描画します。
対象<canvas>のdata-xxx属性でパラメータを指定します。
属性
説明
data-qr
属性値が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だと細かすぎて読み取りにくいと思います。