在项目中需求是上传设备的二维码图片来提交绑定到该账户
所要用到的库是
jsQR
一个纯粹的 javascript 二维码阅读库。 此库接收原始图像，并将定位、提取和解析中找到的任何二维码。
// gitee 仓库地址
https://gitee.com/mirrors/jsQR
[1].安装
npm install jsqr --save
[2].引用
import jsQR from "jsqr";
[3].使用
本项目使用的ui库为elemen-ui 在其中的 el-upload 组件中 on-change事件处理。
1）首先需要将图片转为Base64格式
// 文件转base 64
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
- 在
on-change事件中处理
handleChange(file){
let _this = this;
// 转 base 64
this.getBase64(file.raw).then((res) => {
let img = new Image();
img.src = res;
img.onload = function() {
// base64
var c = document.getElementById("qrcanvas");
var ctx = c.getContext("2d");
// 记一个坑，这里高度得除以2 , 图片会拉伸
ctx.drawImage(img, 0, 0, img.width, img.height / 2);
var imageData = ctx.getImageData(0, 0, img.width, img.height);
// 再进行识别
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log("Found QR code:", code.data);
} else {
_this.$message("图片无对应二维码");
}
};
});
}
其中 code.data就是识别出来的二维码。
