QRコード読み取り比較ツール

同じQRコードの画像でも、読み取るライブラリとそのバージョン、指定した条件によって結果は変わります。このツールは、その差を手元で確かめるためのものです。

このツールは、いま開いているブラウザの中だけで動きます。インストールは不要で、サーバー側の処理もありません。選んだ画像や読み取り結果がこのページの外へ送られることはなく、ツールが追加で行う通信はライブラリ本体(jsQR / OpenCV.js)を CDN からダウンロードする分だけです(ページ自体には、サイト共通のアクセス解析が入っています)。

• jsQR と OpenCV.js を、それぞれ複数バージョンから選べます
• 画像は、QRコードの読み取り値の記事のサンプルから選ぶほか、ファイル選択・ドラッグ&ドロップ・貼り付けでも指定できます
• 読み取れたシンボルのメタ情報——誤り訂正レベル、マスクパターン、型番(バージョン)、RSブロック構成、セグメント構成、最大容量など——を表示します
• jsQRでは生バイト列が取れるので、同じバイト列を UTF-8 / Shift_JIS / EUC-JP などで解釈し直した結果を並べて表示します
• 拡大率・二値化しきい値・白黒反転を変えて、読める条件と読めない条件の境目を探せます

何を見るためのツールか

このツールは、QRコードの読み取り値をそのまま使ってはいけないという記事の実測を、読者が自分で再現できるように作りました。記事で挙げた次の現象は、いずれもここで確かめられます。

• 見た目がほとんど同じでも、返る値は別物になる。サンプル「A: 正常なQR」と「B: 損傷したQR」を続けて読ませると、NO:20260725-004873 と NO:20260725-104873 が返ります。エラーも警告も出ません。
• 同じ画像でもデコーダによって結果が違う。「Shift_JIS / ECI指定なし」のサンプルを、jsQR と OpenCV.js の両方で読ませてみてください。
• 文字コードとECI指定の4通りを比べられる。同じ内容（部品番号 東-004873）を Shift_JIS / UTF-8 × ECI指定あり / なしで生成した4枚を用意してあります。ECI指定ありの2枚は、jsQR の内訳に ECI番号（Shift_JIS は 000020、UTF-8 は 000026）が表示されます。規格どおりECIを指定したほうが読めなくなる組み合わせも、ここで確かめられます。
• 文字コードの解釈しだいで別の文字列になる。jsQR で読むと生バイト列が取れるので、同じバイト列を UTF-8 と Shift_JIS で解釈し直した結果を並べて確認できます。
• 分割QRの1枚目の扱いは、デコーダによって割れる。「分割QRの1枚目」を単独で読ませると、OpenCV.js は末尾の欠けた伝票番号をエラーなしで返し、jsQR は空文字を返します。既定のデコーダは jsQR なので、断片が返る様子を見るにはデコーダを OpenCV.js に切り替えてください。
• 複数のQRが写っていると、戻り順は安定しない。「3つ並んだQR（複数コードの例）」を、OpenCV.js の複数読み取りAPIで、拡大率を変えながら読ませてみてください。

サンプルは、複数コードの例を除いて1枚に1つのQRだけを載せてあります。記事の図版はA/Bを上下に並べた比較図ですが、そのままだと単一読み取りAPIに渡したときにどちらが読まれたのか分からないため、ここでは上下を別々の画像として用意しています。

技術的な補足

ライブラリは jsDelivr から読み込みます。ツール固有の通信はこれだけで、画像や読み取り結果はどこにも送信しません(サイト共通のアクセス解析は、他のページと同様にこのページにも入っています)。

メタ情報の出どころ: 誤り訂正レベルとマスクパターンは、jsQR / OpenCV.js のどちらのAPIも返してくれません。この2つは、シンボル内のフォーマット情報領域(15ビット×2か所、BCH符号で保護)をこのツール自身が読み取って表示しています。jsQR の場合はシンボルの四隅の座標から画像のモジュールを再サンプリングして、OpenCV.js の場合は decode が返す直交化済みシンボル(straight_qrcode)から読んでいます。RSブロック構成や最大容量は、そこで得た誤り訂正レベルと型番から規格の表を引いたものです。

OpenCV.js は Emscripten でビルドされており、起動時に生成コードを評価するため script-src 'unsafe-eval' を必要とします。これをページに与えるとDOMを持つ文脈のCSPが緩んでしまうので、OpenCV.js は Web Worker 内で実行し、その緩和をWorkerのスクリプト1本だけに限定しています。ページ自体のCSPはサイト全体と同じままです。

ご相談はこちら

このページの内容に近い課題があれば、現状と必要な支援の形を添えてご相談ください。