在 Vue 中使用 Canvas 绘制二维码可分为以下几个步骤:
安装 qrcode 库: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;
}
根据页面的需求,可以设置 Canvas 元素的宽、高和边框等样式。
<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>