Blog

WEBページからQRコードを読み取る方法のご紹介

クーポンコードの読み込みなど、
WEBページの中からQRコードの読み取りを行いたい機会があるかもしれません。

Web上で QR コードを読むページ(QRコードリーダー)を作成しました – 強火で進め

↑こちらのサイトで、その方法についてご紹介いただいてましたので、
紹介いたします。

 

↓試しに作ってみたDEMO

DEMO

JSのコードは、ほとんど紹介されていたサイトからお借りしています。

仕組み

大きく、以下の様な手順でQRコードの読み取りが進められています。

  1. QRコード読み取りのJSライブラリと、iOSでのバグ回避のJSを読み込み
  2. ファイルフォームから画像の読み込み
  3. フォームに読み込んだ画像をCanvasに表示して2値化(白黒に)
  4. QRコード読み取りライブラリのAPIを利用してコードを解析し、結果を表示する

 

 

大まかには、ファイルAPIとCanvasの連携で画像を読み込み・処理し、
ライブラリで解析することで、コード内容の取得を実現しています。

具体的なコードの解説は、元のサイトの仕組みをそのまま利用させていただいているので、
こちらでは省略させていただきます。

カメラからの読み取りの場合、
QRコード以外の像が写り込んでいると、うまく解析できないようです。

どちらかと言えば、印刷物のQRコードの読み取り向けかもしれません。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ