HTML5實現掃描識別二維碼/生成二維碼

掃描識別二維碼

思路：

1. 操作攝像頭，獲取圖片。HTML5 WEBRTC的navigator.getUserMedia方法去實時獲取攝像頭資源。 

2. 利用canvas使用相關算法分析圖片識別圖片得出結果，可用jquery.qrcode分析二維碼 。（技術點：getImageData）

 

局限性：

移動平台支持getUserMedia/Stream API的瀏覽器比較少，支持列表 http://caniuse.com/#feat=stream （目前沒發現有IOS是支持的）

 

代碼實現：

感謝github，有現成的算法

1.  https://github.com/LazarSoft/jsqrcode

2.  https://github.com/dwa012/html5-qrcode 

具體實現代碼：

 

鏈接： http://pan.baidu.com/s/1ntH1le5 密碼：7cic

 

生成二維碼

具體代碼

感謝github

1.  https://github.com/LIGuoxiang/QRCode

      

鏈接： http://pan.baidu.com/s/1kT8HHH1 密碼：6byh

測試用的二維碼

qsa2015-08-08 CCID2212553

 

 

其他

IOS替代方案筆記：

調用攝像頭拍照，把圖片傳到h5頁面。然后在解析。

iOS 8版Safari可利用攝像頭掃描錄入信用卡號

http://36kr.com/p/212638.html