vue 利用canvas生成二维码海报

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/sym134/article/details/88800360

做这么个破玩意居然难住了，度娘个杂……果断看官方文档canvas的原理，也就十来分钟的事

html 给个画布  可以在div内，这样可以控制显示大小

<!-- 二维码-->
<div style="display: none;" id="my_qrcode" class="qrcode"></div>
<!--海报-->
<canvas id="myCanvas" width="" height=""></canvas>

vue代码，简单整理了一下，具体实际情况去改

1. 引入二维码生成

   <script src="/wx/Public/Home/Addons/HealthEnvoy/js/qrcode.min.js"></script>

2. vue代码段

   new Vue({
       el: '#app',
       data: {
           my_qrcode: '',
       },
       methods: {
           // 二维码生成  参数参考官方文档
           makeQRcode() {
               let t = this;
               t.my_qrcode = new QRCode('my_qrcode', {
                   width: 224,
                   height: 224,
                   colorDark: '#000000',
                   colorLight: '#ffffff',
                   correctLevel: QRCode.CorrectLevel.L,
                   text: '二维码内容',
               });
           },
           // 创建二维码对象
           qr() {
               let img = new Image();
               img.src = this.my_qrcode._oDrawing._elCanvas.toDataURL();  // 获取64图  测的安卓、ios都可以
               return img;
           },
           // 海报生成
           poster() {
               let t = this;
               let c = document.getElementById('myCanvas');  // 画板id
               //尺寸
               c.width = 600;
               c.height = 870;
               let ctx = c.getContext('2d');
   
               let qr = t.qr();  //二维码图片对象
   
               let img = new Image();   // 背景图对象
               img.onload = function () {
                   ctx.drawImage(img, 0, 0);  // 背景图载入画板
                   ctx.drawImage(qr, 24, 526);  // 二维码图载入画板  后面是定位参数
               };
               img.src = '/wx/Public/Home/Addons/HealthEnvoy/image/invite_img_Customized Poster.png';  // 背景图路经
           },
       }
   
   })

Canvas官方知识点