QR コード・バーコード読み取り

端末内の画像またはカメラ映像から、アップロードなしで QR コードとブラウザが対応するバーコードを読み取ります。選択した画像、ドラッグ&ドロップした画像、貼り付けた画像、カメラの撮影結果を入力として、読み取ったテキストをコピー可能な形で出力します。

ブラウザ内でローカルに実行

画像から QR コード・バーコードを読み取る手順

画像を選択する、ページにドロップする、クリップボードから貼り付ける、またはカメラを起動して 1 コマを撮影します。読み取りはブラウザ自身の BarcodeDetector が行うため、画像は送信されません。計測した 1 回の読み取りで、画像を含むリクエストは 1 件も発生せず、外部通信はサイト自身のアクセス解析だけでした。

使える形式はブラウザが公開している形式です。ページは先に BarcodeDetector.getSupportedFormats() を問い合わせ、自分が知っている一覧との積集合だけを要求します。そのため同じ画像でも、読み取れるブラウザと反応しないブラウザがあります。

ファイル選択で画像を選ぶ、ドロップ領域に置く、パネルに貼り付ける、または「カメラを起動」でコードにカメラを向けます。
選択・ドロップ・貼り付けした画像は「画像を読み取る」、カメラのコマは「撮影して読み取り」を押します。画像でないファイルと 15 MB を超えるファイルは、読み取りを試す前にメッセージを出して拒否します。
結果一覧を確認します。各行にブラウザが報告した形式と読み取ったテキストが入り、1 枚に複数のコードがあれば複数行になります。
「出力をコピー」で、コードごとに 1 行の「形式: 値」としてすべての値をクリップボードに入れます。
「クリア」で画像と値を消してから次に進みます。

読み取れる形式と、画像の扱い

このブラウザが読み取れるコード

macOS の Chrome 153 で計測したところ、公開されていた形式は QR コード、Code 128、Code 39、Code 93、EAN-13、EAN-8、UPC-E、ITF、Data Matrix、Aztec、PDF417 でした。QR のテスト画像、Code 128、EAN-13、Code 39 は内容どおりに読み取れ、UPC-A の画像は EAN 13 として返りました（このビルドは upc_a を公開していません）。Micro QR も一覧にありません。Micro QR のシンボルは検出されず、同じ内容の通常の QR コードは検出されました。

1 枚に 2 つの QR コードがある画像は 1 回の読み取りで両方返り、結果はブラウザが報告した順序を保ちます。読み取りはブラウザ側の機能なので、BarcodeDetector を持たないブラウザは読み込み時にその旨を表示し、推測せずに読み取りを拒否します。

画像の扱い

ファイルはページ内で FileReader により読み込まれ、画像として BarcodeDetector.detect() に渡されます。ドロップや貼り付けの画像も同じ経路で、カメラのコマは canvas に描いてから読み取ります。ファイルは画像であること、15 MB 未満であることが必要で、30 MB の PNG はメッセージ付きで拒否されました。

送信は行いません。画像がリクエストに含まれることはありません。画素数は見た目ほど制約ではなく、9000 x 9000 のテスト画像は約 1 秒で読み取れました。一方、ブラウザが画像として読めないファイルは、何も起きないままにせず内容を表示するようになりました。

カメラと繰り返し実行

カメラは「カメラを起動」を押したときだけ開き、権限の確認もその時点で行われます。コマは「撮影して読み取り」を押すと読み取られ、「カメラを停止」でストリームを解放してプレビューを隠します。映像の間ずっと走査し続ける動作はありません。

読み取りは毎回やり直しなので、同じ画像で「画像を読み取る」を 2 回押しても同じ値になります。何も見つからない場合もその旨を表示し、一覧は空のままです。読み取ったテキストはテキストとして表示され、HTML タグを含む QR コードは描画されずにそのまま表示されます。