🔲
JSでQRコードを生成する
シンプルにブラウザだけで実行できるテキストをQRコードにして表示させる機能がほしかった。qrcodeというモジュールを使ってみた。
qrcodeというモジュールを使ってみる
これを使ってみる。ブラウザ環境でもnode.js環境でも動くので良さげ。
※GitHubのリポジトリにはnode-qrcodeという名前だが、ブラウザ環境でも動く。
実際に動くサンプル
サンプルをCodeSandboxに作った。
動作している様子のキャプチャー。
サンプルコード
インストール。
yarn add qrcode
TypeScriptで使用したい場合は型定義もインストールする。
yarn add -D @types/qrcode
こんな感じでシンプルにcanvas要素に描画できる。オプションについてはこちらのRenderers optionsに記載がある。
import QRCode from "qrcode";
QRCode.toCanvas(
document.getElementById("canvas"),
"simple text",
{
margin: 4,
color: {
dark: "#000000",
light: "#ffffff",
},
scale: 4,
width: 128,
},
function (error) {
if (error) console.error(error);
console.log("success!");
}
);
どういうAPIがあるかについては下記のドキュメントに記載がある。
バンドルサイズはどの程度か？
Next.jsのプロジェクトで試しているので、@next/bundle-analyzerを使ってビルドして確かめてみたところ、下記のとおりでした。
- Stat size: 70.93KB
- Gzip: 8.12KB
具体的にはどういう処理をしているのか？
QRコードを生成する処理はどのようにしているのか気になったので、QRCode.toCanvasの処理を追ってみる。
ここのQRCode.createという関数でQRコードのデータを生成している。
このQRCode.createを含むqrcode.jsでテキストをQRコードデータに変換している。
画像の描画処理はここで行っている。
Discussion