Vue 中使用 Canvas 绘制二维码

在 vue 中使用 Canvas 绘制二维码可分为以下几个步骤：

1. 安装 库：npm install qrcode --save

2. 在 Vue 组件中导入 qrcode 库

   import QRCode from 'qrcode';
   

3. 创建 Canvas 元素

4. <canvas ref="canvas"></canvas>
   在 Vue 组件的生命周期钩子函数 mounted 中编写 Canvas 绘制二维码的代码

5. 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 上绘制

6. 样式要有吧

7. canvas {
     width: 200px;
     height: 200px;
     border: 1px solid #ccc;
   }

8. 完整的 Vue 组件代码   注意 注意 你们的二维码 码  和我不一样 记得转一下 再弄

9. <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>