vue实现二维码广告图片

主要分析一下在vue中怎样简单实现二维码广告图片,在微信上可以直接保存为图片到相册,也可以直接扫描. 最终实现的效果如下图,红色部分可换成自己的logo.

最终效果1.png 最终效果2.png 保存到相册后的效果.png

下面主要说说我的具体实现思路:(代码中都省去了样式和图片)
1.使用html2canvas.
界面都是h5实现, 显示时将h5转换成img替换原来的h5模块, 这种实现思路相对简洁,缺点是html2canvas必须等h5在界面上显示完才能将其转换成img,因此会出现界面闪烁,影响用户体验. 具体实现代码如下:

<template>
    <div class="QrcodePage" ref="QrcodePage">
        <div class="qrContent" ref="qrContent">
            <template v-if="qrContentImage == null">
                <div class="qrTitle">
                    <img class="qrTitleLogo" src="">
                </div>
                <div class="qrCon">
                    <div class="qrConTip">欢迎使用微信扫码</div>
                    <div class="qrConBg">
                        <qrcode :value="qrcodeUrl" :size="190" class="qrcode" type="canvas" level="H"></qrcode>
                        <div class="minLog">
                            <div>
                                <img src="">
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="qrFooter">王老五   18600000000</div>
            </template>
            <template v-else>
                <img v-bind:src="qrContentImage" class="qrContentImage">
            </template>
        </div>
        <div class="tip" @click="canvasImage">长安保存图片</div>
        <img class="close" src="" @click="closeClick"> 
    </div>
</template>
<script>
import html2canvas from 'html2canvas'
import { Qrcode } from 'vux'
export default {
    name: 'agentQrcode',
    data(){
        return {
            qrContentImage: null
        }
    },
    computed: { 
        qrcodeUrl: function(){
            return "http://www.baidu.com"
        }
    },
    components: {
        Qrcode
    },
    mounted: function () {
        this.canvasImage()
    },
    methods: {
        canvasImage: function() {
            var that = this 
            html2canvas(this.$refs.qrContent).then(function(canvas) {
                that.qrContentImage = canvas.toDataURL('image/jpeg', 1.0);
            });
        },
        closeClick: function() {
        }
    }
}
</script>

2.使用canvas画图实现
这种实现比第一种难度稍微大一点,需要对canvas画图api有一定的了解, 但实现效果好. 具体实现代码如下:

<template>
    <div class="QrcodePage" ref="QrcodePage">
        <img class="qrcanvas" width="270" height="390" ref="mycanvas">
        <div class="tip" @click="canvasImage">长安保存图片</div>
        <img class="close" src="换成自己的图片路径" @click="closeClick"> 

        <qrcode class="aQrCode" ref="aQrCode" v-show="false" :value="qrcodeUrl" type="img" :size="100" level="H"></qrcode>
        <img ref="titleLogoImg" v-show="false" width="152" height="37" src="换成自己的图片路径">
   
    </div>
</template> 
<script>

import html2canvas from 'html2canvas'
import { Qrcode } from 'vux' 
export default {
    name: 'agentQrcode',
    data(){
        return { 
            qrcodeUrl:"www.baidu.com",
            imgData: ''
        }
    }, 
    components: {
        Qrcode
    }, 
    methods: {
        canvasImage: function() {
            var drawing = document.createElement('canvas');
            drawing.width = 270
            drawing.height = 390 
            var context = drawing.getContext("2d");
            context.fillStyle="white"; 
            context.fillRect(0, 0, 270, 71); 
            context.fillStyle="#FEBD17";
            context.fillRect(0, 71, 270, 319);  
            var titleLogoImg = this.$refs.titleLogoImg 
            context.drawImage(titleLogoImg, 58, 19, 152, 37);
            this.drawRoundedRect(context, 22, 87, 225, 22, 11, 1, '#fff', '#fff') 
            context.font="14px PingFangSC-Medium";
            context.fillStyle="#000000";
            context.fillText("欢迎使用微信扫码", 65, 102, 140); 
            this.drawRoundedRect(context, 22, 117, 225, 225, 8, 1, '#fff', '#fff') 
            context.font="14px PingFangSC-Medium";
            context.fillStyle="#fff";
            context.textAlign="center";
            context.fillText("王老五     18600000000", 135, 370); 
            var aQrCodeImg = this.$refs.aQrCode;
            var qrImg = document.createElement('img')
            qrImg.src=aQrCodeImg.imgData
            context.drawImage(qrImg , 37, 132, 195, 195); 
            this.drawRoundedRect(context, 113, 208, 50, 50, 4, 1, '#fff', '#fff') 
            this.drawRoundedRect(context, 118, 213, 40, 40, 4, 1, '#DFDFDF', '#fff') 
            var logoImg = new Image()
            logoImg.src = require('换成自己的图片')
            context.drawImage(logoImg , 124, 218, 28, 28); 
            this.$refs.mycanvas.src = drawing.toDataURL("image/png");  
        },
        drawRoundedRect: function (ctx, x, y, w, h, r, bdWidth, bdColor, bgcolor){
            ctx.beginPath();
            ctx.moveTo(x+r,y);
            ctx.lineWidth = bdWidth;
            ctx.strokeStyle = bdColor;
            ctx.fillStyle = bgcolor;
            ctx.arcTo(x+w,y,x+w,y+h,r);
            ctx.arcTo(x+w,y+h,x,y+h,r);
            ctx.arcTo(x,y+h,x,y,r);
            ctx.arcTo(x,y,x+w,y,r);
            ctx.stroke();
            ctx.fill();
            ctx.closePath();
        },
        closeClick: function() { 
        }
    }
}
</script>