Vue 中使用 Canvas 绘制二维码

最新推荐文章于 2024-06-28 17:37:52 发布

原创最新推荐文章于 2024-06-28 17:37:52 发布 · 472 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在 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>