菜单 搜索
首页 前端知识 如何使用h5-scan-qrcode插件实现一个h5页面扫码识别二维码功能

如何使用h5-scan-qrcode插件实现一个h5页面扫码识别二维码功能

2024-02-04 11:02:01 前端知识 前端哥 770 151 我要收藏

为了适应公司代码全程使用jquery构造 如需其他js或者vue 可根据此代码去改（因为好多地方会用到这个东西所以我封装成了一个js文件）

https://dragonir.github.io/h5-scan-qrcode/#/

这个是效果 可以提前看一下~
我做的比这个效果多一个拿取本地图库的二维码扫码
在这里插入图片描述
scancode ---- html文件 如何引入js
scancode.js---- 封装的js文件
jsQR.js ---- 是这个插件所用的一个js可以在vue文件里面直接拿出来 可以去官网看看（不想动手的 麻烦踢踢后台的我 给你们私发！）
jquery.js ----这就不用说了吧

scancode.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="scancode.js?v=1"></script>
  <script type="text/javascript" src="jsQR.js"></script>
</head>
<body>
<div class="">
  <button id="search_scans">点击扫码</button>
  <input type="text" id="assetTableSearch">  //扫码内容复现到此input上
</div>
</body>
<script>
    $(function (){
        scancode({btn:$('#search_scans'),input:$('#assetTableSearch')})
    })
</script>
</html>
复制
scancode.js
/* 
 示例：
 scancode({
     btn:$('#search_scans'),  //打开扫码的按钮
     input:$('#assetTableSearch'), //扫码内容写入的input 可选
     callback:function(code){  //扫码成功回调  可选
        console.log(code)
     }
    })
 */
 
(function(global){
    global.scancode = function(opt){
        return new ScanCode(opt);
    }
    function ScanCode(opt){
        this.init(opt);
    }
    ScanCode.prototype = {
        constructor: ScanCode,
        //扫码识别将内容展示到输入框内  opt是对象  btn:按钮名称  input:输入框 callback:返回数据
        init: function(opt){
            this.opt = opt
            this.addDom()  //添加dom元素
            this.addCss()   //添加class元素
            this.addEvent()   //添加事件
            this.closeScan()  //初始化关闭事件
            this.addLocalGallery()  //调取本地图库
        },
        addLocalGallery:function (){
            $('#scan_bendi_pic').on('click',function (){
                $('#scan_bendi').click()
            })
        },
        addDom:function (){
            if($('#scan_code_scaner').length === 0){
                var html = '<div id="scan_code_scaner">' 
                    +'<i  id="scan_code_close_icon"></i>'
                    +'<div id="scan_code_banner"><p >若当前浏览器无法扫码，请切换其他浏览器尝试</p></div>'
                    +'<div class="scan_code_cover">\n' +
                    '      <p class="scan_code_line"></p>\n' +
                    '      <span class="scan_code_square_top_left"></span>\n' +
                    '      <span class="scan_code_square_top_right"></span>\n' +
                    '      <span class="scan_code_square_bottom_right"></span>\n' +
                    '      <span class="scan_code_square_bottom_left"></span>\n' +
                    '      <p class="scan_code_tips">将二维码放入框内，即可自动扫描</p>\n' +
                    '    </div>'
                    +' <video\n' +
                    '        id="scan_code_video"\n' +
                    '        width="100%"\n' +
                    '        height="100%"\n' +
                    '        controls\n' +
                    '    ></video>'
                    +'<canvas id="scan_code_canvas"/>'
                    +'<div id="scan_bendi_pic"></div>' //如果不想扫码 可点击图库 扫图库里面的二维码
                    +'<input type="file" id="scan_bendi" ></input>'
                    +'</div>'
                $('body').append(html);
            }
        },
        addCss:function (){
            if($('.scan-code-css').length===0){
                var css = '<style class="scan-code-css">'
                    +'#scan_code_scaner{display: none;background: #000000;position: fixed;top: 0;left: 0; width: 100%;height: 100%;}'
                    +'#scan_code_scaner #scan_code_banner{ width: 340px;position: absolute;top: 10%; left: 50%;margin-left: -170px;background: #FA74A2;border-radius: 8px;box-sizing: border-box;padding: 12px;opacity: 0.9;box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);}'
                    +'#scan_code_scaner #scan_code_banner p{  padding: 0;\n' +
                    '        margin: 0;\n' +
                    '        color: #FFFFFF;\n' +
                    '        font-size: 12px;\n' +
                    '        text-align: justify;\n' +
                    '        text-align-last: left;}'
                    +'#scan_code_close_icon{display: inline-block;\n' +
                    '        height: 24px;\n' +
                    '        width: 24px;\n' +
                    '        background: url("data:image/svg+xml;charset=utf-8,") no-repeat center;\n' +
                    '        background-size: auto 100%;\n' +
                    '        position: absolute;\n' +
                    '        right: 10px;\n' +
                    '        top: 15px;}'
                    +'#scan_code_scaner .scan_code_cover{height: 220px;\n' +
                    '        width: 220px;\n' +
                    '        position: absolute;\n' +
                    '        top:50%;\n' +
                    '        left:50%;\n' +
                    '        -webkit-transform: translate(-50%,-50%);\n' +
                    '        -moz-transform: translate(-50%,-50%);\n' +
                    '        -ms-transform: translate(-50%,-50%);\n' +
                    '        -o-transform: translate(-50%,-50%);\n' +
                    '        transform: translate(-50%,-50%);\n' +
                    '        border: .5px solid #999999;\n' +
                    '        z-index: 1111;}'
                    +'#scan_code_scaner .scan_code_cover .scan_code_line{ width: 200px;\n' +
                    '        height: 1px;\n' +
                    '        margin-left: 10px;\n' +
                    '        background: #5F68E8;\n' +
                    '        background: linear-gradient(to right, transparent, #5F68E8, #0165FF, #5F68E8, transparent);\n' +
                    '        position: absolute;\n' +
                    '        -webkit-animation: scan 1.75s infinite linear;\n' +
                    '        -moz-animation: scan 1.75s infinite linear;\n' +
                    '        -ms-animation: scan 1.75s infinite linear;\n' +
                    '        -o-animation: scan 1.75s infinite linear;\n' +
                    '        animation: scan 1.75s infinite linear;\n' +
                    '        -webkit-animation-fill-mode: both;\n' +
                    '        -moz-animation-fill-mode: both;\n' +
                    '        -ms-animation-fill-mode: both;\n' +
                    '        -o-animation-fill-mode: both;\n' +
                    '        animation-fill-mode: both;\n' +
                    '        border-radius: 1px;}'
                    +'#scan_code_scaner .scan_code_cover .scan_code_square_top_left{display: inline-block;\n' +
                    '        height: 20px;\n' +
                    '        width: 20px;\n' +
                    '        position: absolute;\n' +
                    '        top: 0;\n' +
                    '        left: 0;\n' +
                    '        border-left: 1px solid #5F68E8;\n' +
                    '        border-top: 1px solid #5F68E8;}'
                    +'#scan_code_scaner .scan_code_cover .scan_code_square_top_right{display: inline-block;\n' +
                    '        height: 20px;\n' +
                    '        width: 20px;\n' +
                    '        position: absolute;\n' +
                    '        top: 0;\n' +
                    '        right: 0;\n' +
                    '        border-right: 1px solid #5F68E8;\n' +
                    '        border-top: 1px solid #5F68E8;}'
                    +'#scan_code_scaner .scan_code_cover .scan_code_square_bottom_right{display: inline-block;\n' +
                    '        height: 20px;\n' +
                    '        width: 20px;\n' +
                    '        position: absolute;\n' +
                    '        bottom: 0;\n' +
                    '        right: 0;\n' +
                    '        border-right: 1px solid #5F68E8;\n' +
                    '        border-bottom: 1px solid #5F68E8;}'
                    +'#scan_code_scaner .scan_code_cover  .scan_code_square_bottom_left{display: inline-block;\n' +
                    '        height: 20px;\n' +
                    '        width: 20px;\n' +
                    '        position: absolute;\n' +
                    '        bottom: 0;\n' +
                    '        left: 0;\n' +
                    '        border-left: 1px solid #5F68E8;\n' +
                    '        border-bottom: 1px solid #5F68E8;}'
                    +'#scan_code_scaner .scan_code_cover .scan_code_tips{' +
                    'position: absolute;\n' +
                    '        bottom: -48px;\n' +
                    '        width: 100%;\n' +
                    '        font-size: 14px;\n' +
                    '        color: #FFFFFF;\n' +
                    '        opacity: 0.8;}'
                    +'#scan_code_video{display: none;}'
                    +'@-webkit-keyframes scan{0% {top: 0}\n' +
                    '        25% {top: 50px}\n' +
                    '        50% {top: 100px}\n' +
                    '        75% {top: 150px}\n' +
                    '        100% {top: 200px}}'
                    +'@-moz-keyframes scan{ 0% {top: 0}\n' +
                    '        25% {top: 50px}\n' +
                    '        50% {top: 100px}\n' +
                    '        75% {top: 150px}\n' +
                    '        100% {top: 200px}}'
                    +'@-o-keyframes scan{0% {top: 0}\n' +
                    '        25% {top: 50px}\n' +
                    '        50% {top: 100px}\n' +
                    '        75% {top: 150px}\n' +
                    '        100% {top: 200px}}'
                    +'@keyframes scan{0% {top: 0}\n' +
                    '        25% {top: 50px}\n' +
                    '        50% {top: 100px}\n' +
                    '        75% {top: 150px}\n' +
                    '        100% {top: 200px}}'
                    +'#scan_bendi_pic{' +
                    '        background: url("data:image/svg+xml;charset=utf-8,");\n' +
                    '        background-size: auto 100%;\n' +
                    'position: absolute;\n' +
                    'width: 20px;\n' +
                    'height: 20px;'+
                    'bottom: 15px;\n' +
                    'left: 15px;}'+
                    '#scan_bendi{' +
                    'position: absolute;\n' +
                    '    left: -2000px;\n' +
                    '    bottom: 0px;}'
                    +'</style>';
                $('body').append(css);
            }
        },
        addEvent:function (){
            var obj = {};
            this.obj = obj
            var _this = this;
            this.opt.btn.on('click',function (){
                $('#scan_code_scaner').show()
                // 判断了浏览器是否支持挂载在MediaDevices.getUserMedia()的方法
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    obj.lineColor='#03C03C';
                    obj.code = '';
                    obj.lineWidth = 2;
                    obj.previousCode = null;
                    obj.drawOnfound = true;
                    obj.parity = 0;
                    obj.active = true;
                    obj.useBackCamera = true
                    obj.canvas = document.getElementById('scan_code_canvas')
                    obj.scan_code_video =  document.getElementById('scan_code_video')
                    obj.canvas_getContext = document.getElementById('scan_code_canvas').getContext("2d");
                    // 获取摄像头模式，默认设置是后置摄像头
                    const facingMode = obj.useBackCamera ? { exact: 'environment' } : 'user';
                    // 摄像头视频处理
                    const handleSuccess = stream => {
                        if (obj.scan_code_video.srcObject !== undefined) {
                            obj.scan_code_video.srcObject = stream;
                        } else if (window.videoEl && window.videoEl.mozSrcObject !== undefined) {
                            obj.scan_code_video.mozSrcObject = stream;
                        } else if (window.URL && window.URL.createObjectURL) {
                            obj.scan_code_video.src = window.URL.createObjectURL(stream);
                        } else if (window.webkitURL) {
                            obj.scan_code_video.src = window.webkitURL.createObjectURL(stream);
                        } else {
                            obj.scan_code_video.src = stream;
                        }
                        // 不希望用户来拖动进度条的话，可以直接使用playsinline属性，webkit-playsinline属性
                        obj.scan_code_video.playsInline = true;
                        var playPromise = obj.scan_code_video.play();
                        playPromise.catch(() => {
                            $('#scan_code_video').show()
                            $('#scan_code_canvas').hide()
                        });
 
                        // 视频开始播放时进行周期性扫码识别
                        playPromise.then(()=>{
                            _this.run()
                        });
                    };
                    // 捕获视频流
                    navigator.mediaDevices
                        .getUserMedia({ video: { facingMode } })
                        .then(handleSuccess)
                        .catch(() => {
                            navigator.mediaDevices
                                .getUserMedia({ video: true })
                                .then(handleSuccess)
                                .catch(error => {
                                    console.log(error)
                                });
                        });
                }
            })
            $('#scan_bendi').on('change',function (event){
                var docObj = document.getElementById("scan_bendi");
                console.log(44444,docObj.files[0])
                var URL = window.URL || window.webkitURL; // 兼容
                var img = new Image();  // 创建图片对象
                img.src = URL.createObjectURL(docObj.files[0]);//创建Image的对象的url
                img.onload = function () {
                    // console.log(22222222,'height:'+this.height+'----width:'+this.width)
                    _this.obj.canvas.width = this.width;
                    _this.obj.canvas.height =this.height;
                    URL.revokeObjectURL(img.src);
                    _this.obj.canvas_getContext.drawImage(img, 0, 0, this.width, this.height)
                    var imageData =  _this.obj.canvas_getContext.getImageData( 0, 0, this.width, this.height)
                    var code = jsQR(imageData.data, imageData.width, imageData.height);
                    console.log("Found QR code", code);
                    if(code.data){
                        obj.code = code.data
                        if(_this.opt.input){
                            $(_this.opt.input).val(obj.code)
                        }
                        if(_this.opt.callback){
                            _this.opt.callback(code)
                        }
                        $('#scan_code_scaner').hide()
                        _this.obj.scan_code_video.srcObject.getTracks().forEach(t => t.stop());
                    }
                }
            })
        },
        closeScan:function (){
            $(document).on('click','#scan_code_close_icon',function (){
                $('#scan_code_scaner').hide()
            })
        },
        drawLine:function (begin, end){
            var obj = this.obj
            obj.canvas_getContext.beginPath();
            obj.canvas_getContext.moveTo(begin.x, begin.y);
            obj.canvas_getContext.lineTo(end.x, end.y);
            obj.canvas_getContext.lineWidth = obj.lineWidth;
            obj.canvas_getContext.strokeStyle = obj.lineColor;
            obj.canvas_getContext.stroke();
        },
        run:function() {
            var obj = this.obj
            if (obj.active) {
                requestAnimationFrame(()=>{
                    this.tick()
                })
            }
        },
        tick:function () {
            var obj = this.obj
            if (obj.scan_code_video && obj.scan_code_video.readyState === obj.scan_code_video.HAVE_ENOUGH_DATA) {
                obj.canvas.height = document.documentElement.clientHeight  || document.body.clientHeight;
                obj.canvas.width = document.documentElement.clientWidth || document.body.clientWidth;
                $('#scan_code_video').attr('height',obj.canvas.height)
                $('#scan_code_video').attr('width',obj.canvas.width)
                obj.canvas_getContext.drawImage(obj.scan_code_video, 0, 0, obj.canvas.width, obj.canvas.height);
                const imageData = obj.canvas_getContext.getImageData(0, 0, obj.canvas.width, obj.canvas.height);
                var code = false;
                try {
                    code = jsQR(imageData.data, imageData.width, imageData.height);
 
                } catch (e) {
                    console.error(e);
                }
                if (code) {
                    this.drawBox(code.location);
                    this.found(code.data);
                }
            }
            this.run();
        },
        drawBox:function (location) {
            var obj = this.obj
            if (obj.drawOnfound) {
                this.drawLine(location.topLeftCorner, location.topRightCorner);
                this.drawLine(location.topRightCorner, location.bottomRightCorner);
                this.drawLine(location.bottomRightCorner, location.bottomLeftCorner);
                this.drawLine(location.bottomLeftCorner, location.topLeftCorner);
            }
        },
        found:function (code) {
            var obj = this.obj
            if (obj.previousCode !== code) {
                obj.previousCode = code;
            } else if (obj.previousCode === code) {
                obj.parity += 1;
            }
            if (obj.parity > 2) {
                obj.active = true;
                obj.parity = 0;
                obj.code = code
                if(this.opt.input){
                    $(this.opt.input).val(obj.code)
                }
                if(this.opt.callback){
                    this.opt.callback(code)
                }
                $('#scan_code_scaner').hide()
                obj.scan_code_video.srcObject.getTracks().forEach(t => t.stop());
            }
        },
    }
})(window)
 
 
 
 
 
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1283.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jQuery获取URL和URL参数方法详解

2024-02-17 09:02:33

jquery treetable，初步使用

2024-02-17 09:02:32

jQuery对ajax的封装、Node的数据库编程

2024-02-17 09:02:20

前端之jQuery

2024-02-17 09:02:20

jQuery基本操作

2024-01-29 13:01:25

jQuery的选择器

2024-02-17 09:02:16

【jQuery入门】DOM对象和jQuery对象，以及互相转换，选择器

2024-02-17 09:02:12

jQuery鼠标事件、键盘事件、浏览器事件

2024-02-17 09:02:01

【Python】可视化案例一——折线图的开发

2024-02-17 09:02:53

echarts dataZoom.slider is used but not imported.

2024-02-17 09:02:51

广告位招租：QQ85750956
大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！