方式一. 只识别二维码
实现方式一 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>
<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