h5 实现扫码二维码及条形码（js多种实现方式）

HHH 917

已于 2022-03-08 18:52:40 修改

阅读量1.3w

点赞数 13

分类专栏： js 视频文章标签： javascript 前端开发语言

于 2021-12-11 15:25:47 首次发布

本文链接：https://blog.csdn.net/weixin_43245095/article/details/121873168

版权

js 同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

视频

2 篇文章 0 订阅

订阅专栏

方式一. 只识别二维码

实现方式一 jsQR

个人预览页面网址只扫码二维码
GitHub jsQR
inde.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片二维码识别</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
    </head>
    <body>
        <span lan_id="bc">选择图片</span> <input type="file" accept="image/*" multiple  id="pictureChange"/>
        <div>
            <h2>识别结果：</h2>
            <ul id="result">
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
        $("#pictureChange").change(function (e) {
            var file = e.target.files[0];
            if(window.FileReader) {
                var fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onloadend = function(e) {
                    var base64Data = e.target.result;
                    base64ToqR(base64Data)
                }
            }
        })
        function base64ToqR(data) {
            var c = document.getElementById("qrcanvas");
            var ctx = c.getContext("2d");
     
            var img = new Image();
            img.src = data;
            img.onload = function() {
                $("#qrcanvas").attr("width",img.width)
                $("#qrcanvas").attr("height",img.height)
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if(code){
                    showCode(code.data)
                }else{
                    alert("识别错误")
                }
            };
        }
        function showCode(code){
            $("#result").append("<li>"+code+"</li>")
        }
    </script>
</html>

实现方式二 jsqrcode

个人预览页面网址只扫码二维码2
原页面网址webqr.com
GitHub jsqrcode

index.html

<!-- saved from url=(0028)https://webqr.com/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="QR Code scanner">
  <meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript">
  <meta name="language" content="English">
  <meta name="copyright" content="Lazar Laszlo (c) 2011">
  <meta name="Revisit-After" content="1 Days">
  <meta name="robots" content="index, follow">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web QR</title>

<style type="text/css">
body{
    width:100%;
    text-align:center;
}
img{
    border:0;
}
#main{
    margin: 15px auto;
    background:white;
    overflow: auto;
	width: 100%;
}
#header{
    background:white;
    margin-bottom:15px;
}
#mainbody{
    background: white;
    width:100%;
	display:none;
}
#footer{
    background:white;
}
#v{
    width:320px;
    height:240px;
}
#qr-canvas{
    display:none;
}
#qrfile{
    width:320px;
    height:240px;
}
#mp1{
    text-align:center;
    font-size:35px;
}
#imghelp{
    position:relative;
    left:0px;
    top:-160px;
    z-index:100;
    font:18px arial,sans-serif;
    background:#f0f0f0;
	margin-left:35px;
	margin-right:35px;
	padding-top:10px;
	padding-bottom:10px;
	border-radius:20px;
}
.selector{
    margin:0;
    padding:0;
    cursor:pointer;
    margin-bottom:-5px;
}
#outdiv
{
    width:320px;
    height:240px;
	border: solid;
	border-width: 3px 3px 3px 3px;
}
#result{
    border: solid;
	border-width: 1px 1px 1px 1px;
	padding:20px;
	width:70%;
}

ul{
    margin-bottom:0;
    margin-right:40px;
}
li{
    display:inline;
    padding-right: 0.5em;
    padding-left: 0.5em;
    font-weight: bold;
    border-right: 1px solid #333333;
}
li a{
    text-decoration: none;
    color: black;
}

#footer a{
	color: black;
}
.tsel{
    padding:0;
}

</style>

<!-- <script type="text/javascript" async="" src="ga.js"></script> -->
<script type="text/javascript" src="llqrcode.js"></script>
<!-- <script type="text/javascript" src="plusone.js"></script> -->
<script type="text/javascript" src="webqr.js"></script>
<style type="text/css">
      @font-face {
          font-family: "element-icons";
          src: url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.woff') format('woff'),
          url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.ttf ') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      }
  </style></head>

<body>
<div id="main">
<div id="header">
<div style="position:relative;top:+20px;left:0px;"><g:plusone size="medium"></g:plusone></div>
<p id="mp1">
QR Code scanner
</p>
</div>
<div id="mainbody" style="display: inline;">
<table class="tsel" border="0" width="100%">
<tbody><tr>
<td valign="top" align="center" width="50%">
<table class="tsel" border="0">
<tbody><tr>
<!-- <td><img class="selector" id="webcamimg" src="vid.png" onclick="setwebcam()" align="left" style="opacity: 0.2;"></td> -->
<td><img class="selector" id="qrimg" src="cam.png" onclick="setimg()" align="right" style="opacity: 1;"></td></tr>
<tr><td colspan="2" align="center">
<div id="outdiv"><div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas><div id="imghelp">drag and drop a QRCode here<br>or select a file<input type="file" accept="image/*" multiple onchange="handleFiles(this.files)"></div></div></div></td></tr>
</tbody></table>
</td>
</tr>
<tr><td colspan="3" align="center">
<img src="down.png">
</td></tr>
<tr><td colspan="3" align="center">
<div id="result"></div>
</td></tr>
</tbody></table>
<script>
</script>
</div>&nbsp;
<div id="footer">

</div>
</div>
<canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
<script type="text/javascript">load();</script>


</body></html>

llqrcode.js 及 webqr.js 已上传资源在我的csdn资源或者直接去预览网址保存页面下载
个人csdn资源demo源码Web QR_files.rar

方式二只识别条形码 quaggaJS

个人预览页面网址只识别条形码
GitHub demo页面网址quaggaJS/examples/file_input.html

GitHub quaggaJS
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <section id="container" class="container">
        <div class="controls">
            <fieldset class="input-group">
                <input type="file" accept="image/*;capture=camera">
                <button id="btnIdents">识别</button>
            </fieldset>
        </div>
        <div id="interactive" class="viewport"><br clear="all"></div>
    </section>
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
    <script src="./js/quagga.js" type="text/javascript"></script>
    <!-- <link rel="stylesheet" type="text/css" href="./css/fileinput.css"> -->
    <script src="./js/file_input.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var App = {
                init: function () {
                    App.attachListeners();
                },
                attachListeners: function () {
                    var self = this;
                    $("#btnIdents").on("click", function (e) {
                        var input = document.querySelector(".controls input[type=file]");
                        if (input.files && input.files.length) {
                            App.decode(URL.createObjectURL(input.files[0]));
                        }
                    });
                },
                decode: function (src) {
                    var self = this,
                        config = $.extend({}, self.state, {
                            src: src
                        });
                    Quagga.decodeSingle(config, function (result) {
                        //识别结果
                        if (result.codeResult) {
                            console.log(result.codeResult.code);
                            alert("图片中的条形码为：" + result.codeResult.code);
                        } else {
                            alert("未识别到图片中的条形码！");
                        }
                    });
                },
                state: {
                    inputStream: {
                        size: 800,
                        singleChannel: false
                    },
                    locator: {
                        patchSize: "medium",
                        halfSample: true
                    },
                    decoder: {
                        readers: [{
                            format: "code_128_reader",
                            config: {}
                        }]
                    },
                    locate: true,
                    src: null
                }
            };

            App.init();
        });
    </script>
</body>

</html>

quagga.js及file_input.js 已上传csdn 我的资源或者预览页面保存下载
个人csdn资源demo源码quaggademo.rar

方式三. 识别二维码及条形码

方式一 zxing-js

注意：zxing 采用摄像头解析浏览器为了安全只有https协议下或者本地localhost可访问摄像头
个人预览页面网址zxing 摄像头识别二维码及条形码
GitHub zxing-js 摄像头扫码 demo页面网址https://zxing-js.github.io/library/examples/multi-camera/
GitHub zxing-js 所有demo页面网址ZXing TypeScript Examples
GitHub zxing
GitHub zxing-js
index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="ZXing for JS">

  <title>扫码二维码及条形码 ZXing TypeScript | Decoding from camera stream</title>

  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
  <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
</head>

<body>

  <main class="wrapper" style="padding-top:2em">

    <section class="container" id="demo-content">
      <!-- <h1 class="title">Scan Aztec Code from Video Camera</h1> -->

      <p>
        <a class="button-small button-outline" href="../../index.html">HOME 🏡</a>
      </p>
<!-- 
      <p>This example shows how to scan an Aztec code with ZXing javascript library from the device video camera. If more
        than one video input devices are available (for example front and back camera) the example shows how to read
        them and use a select to change the input device.</p> -->

      <div>
        <a class="button" id="startButton">Start</a>
        <a class="button" id="resetButton">Reset</a>
      </div>

      <div>
        <video id="video" width="300" height="200" style="border: 1px solid gray"></video>
      </div>

      <div id="sourceSelectPanel" style="display:none">
        <label for="sourceSelect">Change video source:</label>
        <select id="sourceSelect" style="max-width:400px">
        </select>
      </div>

      <label>Result:</label>
      <blockquote>
        <p id="result"></p>
      </blockquote>

      <p>See the <a href="https://github.com/zxing-js/library/tree/master/docs/examples/qr-camera/">source code</a> for
        this example.</p>
    </section>
<!-- 
    <footer class="footer">
      <section class="container">
        <p>ZXing TypeScript Demo. Licensed under the <a target="_blank"
            href="https://github.com/zxing-js/library#license" title="MIT">MIT</a>.</p>
      </section>
    </footer> -->

  </main>

  <!-- <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script> -->
  <!-- <script type="text/javascript" src="./js/library@0.18.6.min.js"></script> -->
  <script type="text/javascript" src="./js/library.min.js"></script>
  <script type="text/javascript">
    window.addEventListener('load', function () {
      let selectedDeviceId;
      const codeReader = new ZXing.BrowserAztecCodeReader();
      console.log('ZXing code reader initialized')
      codeReader.getVideoInputDevices()
        .then((videoInputDevices) => {
          const sourceSelect = document.getElementById('sourceSelect')
          selectedDeviceId = videoInputDevices[0].deviceId
          if (videoInputDevices.length >= 1) {
            videoInputDevices.forEach((element) => {
              const sourceOption = document.createElement('option')
              sourceOption.text = element.label
              sourceOption.value = element.deviceId
              sourceSelect.appendChild(sourceOption)
            })

            sourceSelect.onchange = () => {
              selectedDeviceId = sourceSelect.value;
            };

            const sourceSelectPanel = document.getElementById('sourceSelectPanel')
            sourceSelectPanel.style.display = 'block'
          }

          document.getElementById('startButton').addEventListener('click', () => {
            codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
              console.log(result)
              // alert(result);
              document.getElementById('result').textContent = result.text
            }).catch((err) => {
              console.error(err)
              // alert(err);
              document.getElementById('result').textContent = err
            })
            console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
          })

          document.getElementById('resetButton').addEventListener('click', () => {
            codeReader.reset()
            document.getElementById('result').textContent = '';
            console.log('Reset.')
          })

        })
        .catch((err) => {
          console.error(err)
        })
    })
  </script>

</body>

</html>