生成二维码图片
1,第三方库:qrcode
npm install qrcode --save
2,使用方法:
import QRCode from 'qrcode'(ts项目中import方式需要处理tslint错误)
const resCode = '后端返回的二维码code'
const codeUrl = await QRCode.toDataURL(resCode)
将codeUrl赋值到img标签的src即可展示出二维码图片,codeUrl是一个base64编码。
<img src={codeUrl} alt="图片加载失败" />
解析二维码图片
1,第三方库:qrcode-reader
npm install qrcode-reader --save
2,使用方法:
import QrCode from 'qrcode-reader' (适用于js)
const QrCode = require('qrcode-reader').default
const qr = new QrCode()
qr.decode('图片文件路径url')
qr.callback = (error, code) => {
if (error) 解析失败 return;
console.log('解析结果':code.result)
}
下面是本人实现图片上传->压缩->解析 整个流程代码 ,仅供参考。
// 该方法实现得到图片路径 getFileUrl(file: object){ if (file === undefined) return; let 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; } // 该方法实现将图片进行压缩之后再进行解析 // 因为如果图片过大(1M)以上,大概率会解析失败 qrCodeUploadedHandler(imageFile: object, fileImageUrl: string){ const canvas = document.createElement('canvas'); const context = canvas.getContext('2d') as any; const img = new Image(); img.src = fileImageUrl; img.onload = () => { const originWidth = img.width; const originHeight = img.height; const maxWidth = 1280; const maxHeight = 768; let targetWidth = originWidth; let targetHeight = originHeight; if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } canvas.width = targetWidth; canvas.height = targetHeight; context.clearRect(0, 0, targetWidth, targetHeight); // 图片压缩 context.drawImage(img, 0, 0, targetWidth, targetHeight); canvas.toBlob( blob => { // new File(blob,name,type)方法可将canvasblob转换成文件 // 转换成的文件与上传文件的files[0]格式一样 const newImageFile = new File([blob as any], (imageFile as any).name, { type: (imageFile as any).type }); const qr = new QrCode() qr.decode(this.getFileUrl(newImageFile)); qr.callback = (error: any, resCode: any) => { let result = ""; if (error) { result = "解析失败" } else { result = resCode.result } this.uploadReport = { title: 'qrcode-reader-upload', result: result, } } }, 'image/jpeg', 0.7, ); }; img.onerror = () => console.error('Upload file of image format please.'); }; // 该方法实现图片上传 changeHandler(e: any){ this.uploadReport = { title: 'qrcode-reader-upload', result: '', } const file = e.target.files[0]; if (file !== undefined) { const fr = new FileReader(); fr.readAsDataURL(file); fr.addEventListener('load', () => { this.qrCodeUploadedHandler(file, fr.result as string); }); // var qr = new QrCode() // qr.decode(this.getFileUrl(file)); // qr.callback = (error: any, resCode: any) => { // let result = ""; // if (error) { // result = "解析失败" // } else { // result = resCode.result // } // this.uploadReport = { // title: 'qrcode-reader-upload', // result: result, // } // } } }