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上网可以找到