一 、安装qrcode
npm install qrcode
二、生成二维码
<!-- html部分 -->
<template>
<div class="all">
<div class="qr_center">
<canvas id="canvass"></canvas>
</div>
</div>
</template>
<script>
useqrcode(createId) {
// createId是生成的二维码内容，可以添加变量或字符串随自己心意
// this.$nextTick() 异步执行dom更新,一旦观察到数据变化就会开启一个队列，
// 我是这个地方，是运用在一个vue项目里编写的 html部分写在了一个弹窗里面，所以使用
//了this.$nextTick来获取 document.getElementById('canvass')
this.coding = true;
this.$nextTick(() =>{
let canvas = document.getElementById('canvass')
QRCode.toCanvas(canvas, createId, error=>{
if (error) console.error(error)
})
})
},
</script>
三、html部分，上传二维码解析（数据库或图片服务器未做存储的情况下，将你生成的 二维码保存本地上传），另外提醒一下使用$函数要下载或引用Jquery
<template>
<div>
<div>
<input style="text-align: center" type='text' id='file' disabled="disabled" class="form-control" />
<span class="input-group-btn"><button id="btn" type='button' class='btn btn-primary language_label'
@click="analysis" onclick="document.getElementById('pictureChange').click()">选择文件</button>
</span>
<input type="file" id="pictureChange" class="file2" style="display: none" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1)" />
</div>
<div>
<h4>识别结果：</h4>
<ul id="result"></ul>
<div id="bos"></div>
</div>
</div>
</template>
<script>
analysis(){
let cd = [];
this.$nextTick(() =>{
$("#bos").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
$("#pictureChange").change(function (e) {
let file = e.target.files[0];
if(window.FileReader) {
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onloadend = function(e) {
let 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){
Encode.push(code.data)
showCode(code.data)
return
}else{
alert("识别错误")
}
};
}
function showCode(code){
$("#result").append("<li>"+code+"</li>")
}
})
},
</script>
以下是移动端的扫一扫解析方法
一，安装jsQR
npm install jsqr --save
二、扫一扫使用
<template>
<div class="scan">
<div class="video-container">
<video class="video" id="video-1"></video>
</div>
<div class="camera-container" v-if="videoInputDevices.length">
<label>摄像头：</label>
<select v-model="currentVideoInputDevice">
<option
v-for="(videoInputDevice, index) in videoInputDevices"
:key="index"
:value="videoInputDevice"
>
{{ videoInputDevice.label }}
</option>
</select>
</div>
</div>
</template>
<script >
import {
BrowserMultiFormatReader,
ChecksumException,
FormatException,
} from "@zxing/library";
export default {
data() {
return {
codeReader: new BrowserMultiFormatReader(),
videoInputDevices: [],
currentVideoInputDevice: {},
decodeResult: undefined,
};
},
created() {},
methods: {
async openScan() {
const _this = this;
_this.codeReader
.getVideoInputDevices() //老版本listVideoInputDevices()
.then((videoInputDevices) => {
if (videoInputDevices && videoInputDevices.length) {
if (videoInputDevices.length > 1) {
videoInputDevices.reverse();
} //防止先唤出前摄像头
_this.videoInputDevices = videoInputDevices;
_this.currentVideoInputDevice = videoInputDevices[0];
}
})
.catch(() => {});
},
decodeFromInputVideo() {
const _this = this;
_this.codeReader.reset();
// 多次
_this.codeReader.decodeFromVideoDevice(
_this.currentVideoInputDevice.deviceId,
"video-1",
(result, err) => {
if (result) {
_this.decodeResult = result;
}
if (err) {
if (err instanceof ChecksumException) {
console.log(
"A code was found, but it's read value was not valid."
);
}
if (err instanceof FormatException) {
console.log("A code was found, but it was in a invalid format.");
}
}
}
);
},
successDecode() {
const _this = this;
alert(_this.decodeResult.text)
alert("Hi! Welcome to my world!")
},
},
watch: {
currentVideoInputDevice: function () {
this.decodeFromInputVideo();
},
decodeResult: function () {
this.successDecode();
},
},
mounted: function () {
this.openScan();
},
unmounted: function () {
this.codeReader.reset(); //关闭
},
};
</script>
<style scoped lang="scss">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.scan {
display: flex;
flex-direction: column;
align-items: center;
color: #ff9900;
width: 100vw;
height: 100vh;
background: #000;
.video-container {
margin-top: 10px;
display: flex;
justify-content: center;
video {
width: 96vw;
max-height: 80vh;
}
@media (min-width: 500px) {
video {
// width: 80vh;
max-width: 96vw;
height: 80vh;
}
}
}
.camera-container {
margin-top: 5vh;
width: 80%;
height: 50px;
line-height: 44px;
border-radius: 10px;
border: 3px solid #ff9900;
display: flex;
justify-content: center;
select {
width: calc(100% - 80px);
color: #ff9900;
background: transparent;
border: none;
outline: none;
}
}
}
</style>
这是直接字符串生成二维码的代码或许能给你一些灵感，copy 直接运行即可
<template>
<div class="all">
<div class="ip-app">
<!--页头-->
<el-breadcrumb separator-class="el-icon-arrow-right" class="ip-head">
<el-breadcrumb-item>资产管理</el-breadcrumb-item>
<el-breadcrumb-item>二维码生成</el-breadcrumb-item>
</el-breadcrumb>
<div class="QR_switchover">
<span>二维码生成</span>
</div>
<div class="QRCode_seek">
<div>请输入内容：</div>
<div><el-input v-model="txt"></el-input></div>
<div><el-button @click="create()" type="primary">生成</el-button></div>
</div>
<div class="qr_center">
<canvas id="canvass"></canvas>
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcode'
export default {
// components: {ElButton},
data() {
return {
msg: '江南无所有、聊赠一枝春',
txt:""
}
},
mounted(){
this.useqrcode(this.msg)
},
methods: {
useqrcode(txt) {
//生成的二维码内容，可以添加变量
var canvas = document.getElementById('canvass')
QRCode.toCanvas(canvas, txt, error=>{
if (error) console.error(error)
})
}
,
create(){
if(!this.txt&&this.txt!="0"){
this.$message('请输入生成值');
}else{
this.useqrcode(this.txt)
this.$message({
message: '恭喜你，生成成功',
type: 'success'
});
}
}
}
}
</script>
<style>
#canvass{
height: 500px!important;
width: 500px!important;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
height: 100%;
}
.all{
height:100%;
width:100%;
padding:1% 2%;
}
.QR_switchover{
height: 80px;
background-color: #ffffff;
/*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
line-height: 80px;
padding-left:2%;
font-size:1.8em;
}
.qr_center{
background-color: #fff;
margin-top: 2%;
text-align: center;
}
.QRCode_seek{
padding: 2% 3%;
background-color: #fff;
}
.QRCode_seek>div{
display: inline-block;
}
.QRCode_seek>div:last-child{
margin-left: 2%;
}
</style>
