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

2023-11-13 17:09:28

方式一. 只识别二维码

实现方式一 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资源或者直接去预览网址保存页面下载

方式二只识别条形码

个人预览页面网址只识别条形码
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 我的资源或者预览页面保存下载

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

方式一 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

码农公寓