Html5實現二維碼掃描並解析

這篇文章主要介紹了Html5實現二維碼掃描並解析的相關資料,需要的朋友可以參考下

引子：

最近公司項目有個需求，微博客戶端中， h5 的頁面上的某個按鈕能夠與native 交互呼起攝像頭，掃描二維碼並且解析。在非微博客戶端中（微信或者是原生瀏覽器，如：safari）呼起系統的拍照或者上傳圖片按鈕，通過拍照或者上傳圖片解析二維碼。

第二種方案需要在前端js 解析二維碼。這樣依賴一個第三方的解析庫jsqrcode。這個庫已經支持在瀏覽器端呼起攝像頭的操作了，但是依賴一個叫getUserMedia的屬性。該屬性移動端的瀏覽器支持的都不是很好，所以只能間接的上傳圖片的方式解析二維碼。

getUserMedia屬性兼容瀏覽器列表：

首先感謝jsqrcode 的開發者，提供這麼優秀的解析二維碼的代碼，為我減少了很大的工作量。 jsqrcode 地址：點我

我的代碼庫地址：點我

1.解決的問題：

1.能夠在微博客戶端呼起攝像頭掃描二維碼並且解析;

2.能夠在原生瀏覽器和微信客戶端中掃描二維碼並且解析;

2.優點：

web端或者是h5端可以直接完成掃碼的工作；

3.缺點：

圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近)，相對於native 呼起的攝像頭解析會有1-2秒的延時。

此插件需要配合zepto.js 或者jQuery.js使用

1.在需要使用的頁面按照下面順序引入lib目錄下的js 文件