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

2022-03-03 14:32:38 阅读：159 来源： 互联网

标签：function 扫码 code img h5 width result js

方式一. 只识别二维码

实现方式一 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" onl oad="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" onl oad="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" onl oad="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>

library.min.js 已上传我的csdn资源或者预览页面保存下载
个人csdn资源demo源码librarydemo.rar

方式二综合 jsqrcode 及quaggaJS 实现文件上传识别二维码及条形码

标签：function,扫码,code,img,h5,width,result,js
来源： https://blog.csdn.net/m0_67266171/article/details/123253212

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9