vue 利用canvas生成二维码海报

以你之姓@ 2022-02-28 11:22 680阅读 0赞

做这么个破玩意居然难住了，度娘个杂……果断看官方文档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**[官方知识点][Link 1]** ###

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images