ブラウザ上にドラッグ＆ドロップ (D&D) されたQRコードの画像を、読み込んでデコードするUIを作りたい。
Pure JavaScript で動作する、QR コードデコーダー（パーサー） cozmo/jsQR が有名なので、これを使ってみよう。
jsQR は、 png や jpg といった画像コンテナの解凍機能も、 HTML や DOM, Web 周りに特化した機能も一切無いため、読み込ませた画像は何らかの方法で Uint8ClampedArray な RAW 画像に変換して渡す必要がある。
ちょっと遠回りにはなるが、
- D&D されたファイルの File API を読み取る
- FileReader API を使って、ファイルを DataURI として読み込ませ、 img タグに表示させる
- OffscreenCanvas と OffscreenCanvasRenderingContext2D を経由して ImageData を作成する
- jsQR に処理を投げる
といった処理になるだろうか。
早速実装してみよう。