引子:
最近公司項目有個需求,微博客戶端中, h5 的頁面上的某個按鈕能夠與native 交互呼起攝像頭,掃描二維碼并且解析。在非微博客戶端中(微信或者是原生瀏覽器,如:safari)呼起系統(tǒng)的拍照或者上傳圖片按鈕,通過拍照或者上傳圖片解析二維碼。
第二種方案需要在前端 js 解析二維碼。這樣依賴一個第三方的解析庫jsqrcode。這個庫已經(jīng)支持在瀏覽器端呼起攝像頭的操作了,但是依賴一個叫g(shù)etUserMedia的屬性。該屬性移動端的瀏覽器支持的都不是很好,所以只能間接的上傳圖片的方式解析二維碼。
getUserMedia屬性兼容瀏覽器列表:
首先感謝 jsqrcode 的開發(fā)者,提供這么優(yōu)秀的解析二維碼的代碼,為我減少了很大的工作量。jsqrcode 地址:點我
我的代碼庫地址:點我
1.解決的問題:
1.能夠在微博客戶端呼起攝像頭掃描二維碼并且解析;
2.能夠在原生瀏覽器和微信客戶端中掃描二維碼并且解析;
2.優(yōu)點:
web端或者是 h5端可以直接完成掃碼的工作;
3.缺點:
圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近),相對于 native 呼起的攝像頭解析會有1-2秒的延時。
說明:
此插件需要配合zepto.js 或者 jQuery.js使用
使用方法:
1.在需要使用的頁面按照下面順序引入lib目錄下的 js 文件
新聞熱點
疑難解答