<canvas>への描画ですので、バージョン8以下のIE等、古いブラウザには非対応です。
基本的な使い方
<canvas class="qrcode" data-str="http://web-sozai.seesaa.net/"></canvas>
<script src='qr.js'></script>
<script>
QR();
</script>
<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>
<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