使用JS調用手機本地攝像頭或者相冊圖片識別二維碼/條形碼

接着昨天的需求,不過此次不依賴微信,使用純js喚醒手機本地攝像頭或者選擇手機相冊圖片,識別其中的二維碼或者是條形碼.昨天,我使用微信掃一掃識別,效果超棒的.不過若是依賴微信的話,又怎麼實現呢,這裏介紹兩個js庫,都很牛掰,感謝大神,獻上連接.css

倉庫:https://github.com/serratus/quaggaJS
html

官網: https://serratus.github.io/quaggaJS/android

識別二維碼ios

條形碼解析:git

我也是在網上找了一大堆,都失敗了,別人博主寫的都沒頭沒尾的,沒法實現其功能,既然有工具就一梭子的事情了,花費了一夜,終於弄出來了,下面就是設置參數的問題了github

甩出一個倉庫,你們下載這個倉庫就能夠實現此功能的,不過條形碼識別的準確性有點問題.須要設置對應的參數,其中須要修改代碼web

........瀏覽器

// , 'code_39_reader','code_128_reader',"ean_reader", 
 decoder: { readers: [{ format: ['ean_reader'], //條形碼種類不少,選擇適合本身的
 config: {} }] },

　　........微信

二維碼解析:app

這個沒找到開源倉庫,不過找到一個能夠實現的DMEO,你們喜歡的話能夠本身深究,我要去擼代碼了.

個人倉庫實例地址: https://gitee.com/guyandog/QR_BR 傳送門

收集不易,點贊鼓勵,謝謝

PS: 我這裏是識別靜態圖片,若是是須要手機打開攝像頭的,將input中添加這樣的屬性,以下:

<!DOCTYPE html>
< html>
< head>
     <meta charset="UTF-8"/>
     <title>index</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
     <meta name="mobile-web-app-capable" content="yes"/>
     <meta name="format-detection" content="telephone=no">
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
< /head>
< body>
< style> input{ display: block; width: 100px; height: 60px; background: red; color: white; font-size: 16px; line-height: 60px; outline: none; border: 0; } < /style>

<input id="pictureB_file" accept="image/*" type="file" capture="camera" name="pictureA_file"/>
< input id="pictureC_file" type="file" name="pictureA_file"/>
< script> var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 //alert('是不是Android：'+isAndroid); //alert('是不是iOS：'+isiOS); if (isAndroid) { //若是是安卓手機，就彈框是選擇圖片仍是拍照 $(".tankuang").css("display", "block"); } else { //若是是蘋果系統，就還照以前的樣子去操做便可 //$($("#pictureA_file")[0]).click(); } < /script>
< /body>
< /html>

參考網站:(感謝這些博客的博主)

https://www.zhangshengrong.com/p/2EaE0WdO1M/

http://www.cnblogs.com/yaotome/p/9450274.html