JavaScript で QRコード ¹の読取り・生成を行うライブラリはいくつかあります。

ここではC#などでは定番のライブラリ ZXing の JavaScript 移植版である ZXing-js を使って、ブラウザ上で QRコードの読取り・生成を行う方法を説明します。

インストール

• ブラウザで使用する場合は下記の2つのライブラリを使います
  • @zxing/library
    • zxing-js の本体
  • @zxing/browser
    • zxing-js のブラウザ用ラッパー
    • imgエレメントなどから直接デコードするメソッドを提供する
    • なお、一部メソッドはzxing-js本体にもあるが、そちらは deprecated なので注意

読取り

// img タグの取得
const image = document.getElementById('image');

// デコードして、コンソールに出力する
const codeReader = new ZXing.BrowserQRCodeReader();
try {
    const result = await codeReader.decodeFromImage(image);
    console.log(result.text);
} catch(error) {
    console.error(error);
}

• ZXing.BrowserQRCodeReader.decodeFromImage に img タグを渡して読取りを行います
• 成功すると Result が返ってくるので、Result.text フィールドで結果を取得できます
• 失敗すると例外が発生するので、catch するなりして処理をします
  • 例えば、QR コードが存在しない時は NotFoundException が送出されます

生成

// 出力先を取得
const writeSvg = document.getElementById('write-svg');

// QR コードを生成して SVG として出力
const writer = new ZXing.BrowserQRCodeSvgWriter();
const svg = writer.write('https://sakaf.net', 256, 256);

// 出力先に追加する
writeSvg.appendChild(svg);

• ZXing.BrowserQRCodeSvgWriter.write メソッドで生成を行います
  • 引数には下記を指定します
    • 生成する QR コードのテキスト
    • サイズ幅
    • サイズ高さ
• 結果は SVG タグエレメントとして返って来るので、単に表示する時は適切な場所に追加するだけで OK です

デモ

• 実装したデモページは下記にあります
  • https://sakaita.github.io/QRReadWriteDemo/
• デモページのソースコードは下記に置いてあります
  • https://github.com/SakaITa/QRReadWriteDemo

参考資料

• ZXing-js