H5页面实现扫一扫功能

最新推荐文章于 2025-07-10 15:12:29 发布

小序同学

最新推荐文章于 2025-07-10 15:12:29 发布

阅读量3.6w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34873894/article/details/83719922

H5 调用扫描二维码做不到，因为浏览器没有那么大的权限

整体思路：我查了一下一般有这个需求的都是先做上传文件动作调用摄像头或者图库然后把二维码传到服务器上解析后 ajax传回来在执行别的动作。

上代码：

HTML：
<div class="right-three" onclick="saoYisao()">
    <img class="goclass_three" id="fistSaoyisao" src="{xiao:$site_template}images/scanning@2x.png"/>
    <input type="file" capture="camera" style="position:absolute;top: 12px;width: 24px;opacity: 0;right:3px;z-index: 0;" class="upload-pic-input"/>
</div>

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