在 vue 中使用 Canvas 绘制二维码可分为以下几个步骤：
- 安装 库：
npm install qrcode --save - 在 Vue 组件中导入 qrcode 库
import QRCode from 'qrcode';
- 创建 Canvas 元素
- <canvas ref="canvas"></canvas>
在 Vue 组件的生命周期钩子函数 mounted 中编写 Canvas 绘制二维码的代码
mounted() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) { if (err) throw err; const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = url; }); },
- 在上面的代码中，我们使用 QRCode 库的 toDataURL 方法生成二维码图片的 base64 编码，并将其转换为 Image 对象，最后在 Canvas 上绘制
- 样式要有吧
- canvas {
width: 200px;
height: 200px;
border: 1px solid #ccc;
} - 完整的 Vue 组件代码 注意 注意 你们的二维码 码 和我不一样 记得转一下 再弄
<template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import QRCode from 'qrcode'; export default { mounted() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) { if (err) throw err; const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = url; }); } }; </script> <style> canvas { width: 200px; height: 200px; border: 1px solid #ccc; } </style>
