不是小程序二维码，就普通二维码
又不是扫码解析，纯js解析的
不是小程序二维码，就普通二维码
又不是扫码解析，纯js解析的
不是小程序二维码，就普通二维码
又不是扫码解析，纯js解析的
不是小程序二维码，就普通二维码
又不是扫码解析，纯js解析的
前端qrcode-parser可以解析二维码，js调用。
或者提交后台解析就行了
参考来源：https://blog.csdn.net/MFCdestoryer/article/details/118154003
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
</head>
<body>
<!--牛逼真的真的可用-->
<span lan_id="bc">选择图片</span>
<input type="file" id="pictureChange" />
<div>
<h2>识别结果：</h2>
<ul id="result"></ul>
</div>
<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>
</body>
</html>
可以提交给后台，进行解析
用微信扫一扫或者小程序自动解析
二维码生成字符串，后台进行解析
这是我之前写小程序的时候用到的一些方法，不知道这部分是不是你想要的，有什么问题可以继续沟通哈
// 获取二维码
ShowQRCode(e) {
console.log('ShowQRCode')
wx.showLoading({
title: '获取二维码...',
mask: true
})
let that = this
wx.cloud.callFunction({
name: 'AdminManage',
data: {
type: 'qrcode',
updatetime: formatTime(new Date())
},
success(res) {
wx.hideLoading()
console.log('res', res)
if (res.errMsg == "cloud.callFunction:ok") {
let data = res.result.data
if (data.id && !data.stats && data.code) {
// 设置二维码的值并显示
that.setData({
QRcodeData: JSON.stringify(data),
QrcodeStats: true,
showCode: true,
id: data.id
})
// 开始监听二维码状态
that.QrcodeStats(that.data.id)
} else {
that.ShowTips('网络错误,获取失败')
}
} else {
that.ShowTips('网络错误,获取失败')
}
},
fail(err) {
wx.hideLoading()
console.log(err)
that.ShowTips('网络错误,获取失败')
}
})
},
// 监听二维码状态
QrcodeStats(id) {
let that = this
const db = wx.cloud.database()
var watcher = db.collection('TempCllection').where({
_id: id
}).watch({
onChange: function (snapshot) {
console.log('snapshot', snapshot)
console.log('docChanges', snapshot.docChanges)
console.log('docs', snapshot.docs[0])
console.log("***************************")
if (snapshot.docs[0].stats) {
// 提示二维码失效
that.setData({
QrcodeStats: false
})
// 关闭监听
watcher.close()
}
},
onError: function (err) {
// 关闭监听
watcher.close()
console.error('the watch closed because of error', err)
}
})
},
传到后端解析
首先要引入文件qrcode.js，下载地址为：http://static.runoob.com/download/qrcodejs-04f46c6.zip;
1、识别本地图片：
通过文件的形式获取到本地的图片，生成一个图片的临时路径，然后解析这个二维码图片；
qrcode.decode(img)方法能将二维码图片解析，通过qrcode.callback=function(img){}将解析的图片返回文本值；
/获取预览图片路径
var getObjectURL = function(file){
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
console.log(getObjectURL(newfile[0]));// newfile[0]是通过input file上传的二维码图片文件
qrcode.decode(getObjectURL(newfile[0]));
qrcode.callback = function(imgMsg){
console.log("imgMsg",imgMsg);
}
2、生成二维码:
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});
qrcode.makeCode('123123');
生成二维码
2018-9-12：
实在不好意思，我用的插件是经过别人再次封装的，我将一个解析二维码的demo放在了码云需要的可以去下载！！
https://gitee.com/weijunw/erweima
另外在本博客的资源也可以下载：https://download.csdn.net/download/qq_37705048/10720916
当然上传的图片里要有二维码才能解析出来！！！