H5頁面實現掃一掃功能
阿新 • • 發佈:2018-12-19
H5 呼叫 掃描 二維碼 做不到 ,因為瀏覽器沒有那麼大的許可權
整體思路:我查了一下 一般有這個需求的 都是先做上傳檔案動作 呼叫攝像頭或者相簿 然後 把二維碼傳到伺服器上 解析後 ajax傳回來 在執行別的動作。
上程式碼:
HTML: <div class="right-three" onclick="saoYisao()"> <img class="goclass_three" id="fistSaoyisao" src="{xiao:$site_template}images/[email protected]"/> <input type="file" capture="camera" style="position:absolute;top: 12px;width: 24px;opacity: 0;right:3px;z-index: 0;" class="upload-pic-input"/> </div>
JS
<script src="js/jQuery.min.js"></script> <script src="js/qrcode.lib.min.js"></script> <script src="js/qrcode.js"></script>
function saoYisao(){ var dom = document.getElementsByClassName('upload-pic-input'); Array.from(dom).forEach(item=>{ item.onchange = function(){ $(this).parent().find('p').hide(); $(this).parent().find('.iconfont').hide(); var src = getObjectURL(this.files[0]); qrcode.decode(src); qrcode.callback = function(src){ alert(src);//轉碼出來的資訊 } } }); function getObjectURL(file) { var url = null; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } }
js上網可以找到,附上本人WX:snow19941121,有疑問的可以解答