引子：
最近公司項目有個需求，微博客戶端中， 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 文件

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表