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

スマホ向けQRコードリーダー
http://tsuyobi.heteml.net/html/tools/qr_code_reader/

アプリの開発中などに借りてきた端末に URL を送りたい時に短縮URLで送るのも面倒くさいので Web 上でQRコードを読めるページを作成しました。借りた端末だとQRコードリーダーをインストールしたり出来ないので必要に迫られて制作。

サイトにアクセスして、「ファイルアップロードのボタンを押す→QRコードをカメラで撮影」以上。
あまり、解析の精度は高く無いのでなるべくQRコードだけが映るように撮影して下さい。

最近の iPhone だとマクロ撮影がイマイチ上手く出来ないので撮影するものから離してピントを合わせる必要が有ります。しかし、その状態だとQRコードを上手く解析出来ないのでQRコードを大きく撮影する必要が有ります。

これを解決するにはズーム撮影するのが良いです。画面をピンチアウト(閉じた指2つを広げる)するとズーム撮影する事が出来ます。

QRコード作成ツールのページも準備しました。

QRコード作成ツール
http://tsuyobi.heteml.net/html/tools/qr_code_creator/

カメラの画像をアップする他に画像のアップも可能です。

スマホでサイトを見てる時にたまにQRコードの画像が貼っている時にもその画像を保存した後にアップする事で内容をチェックしたりも出来ます。

あまりそういうシチュエーションは無いかと思いますがQRコードの解析は JavaScript で行っているのでオフラインでも動作します。

こちらのページはもちろん PC でも使えますが PC だと画像アップだけ対応です。 Web カメラでQRコードを読みたい場合にはこちらのサービスを使うのが良いでしょう。

Web QR
http://webqr.com/

JavaScript でQRコードを解析する処理はこちらのライブラリを使わせて頂きました。

LazarSoft/jsqrcode · GitHub
https://github.com/LazarSoft/jsqrcode

そのままではイマイチ解析精度が悪かったのでざっくりと2値化する処理を作成し、事前に2値化してからライブラリに解析をさせる形にしたところグッと精度が上がりました。

iPhone で撮影した画像を canvas に描画すると画像が歪んで表示されました。この症状はこちらのサイトを参考に解消できました。感謝!!

iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
http://d.hatena.ne.jp/shinichitomita/20120927/1348726674

強火で進め