前端将两张图片合为一张

原理是使用canvas画布。

在页面加载前 mounted方法里：
 

setTimeout(() => {

    this.changeimg();

}, 1000);

changeimg( )方法：

    changeimg(){
            var self = this;
            var imgsrcArray = [
                require('../../assets/image/income/background.png'),
                $('#qrcode canvas')[0].toDataURL('image/png')
            ];
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = 750;
            canvas.height = 1334;
            var imglen = imgsrcArray.length;
            var showContent = '我是'+this.showPhone;
            var drawimg = (function f(n){
                if(n < imglen){
                    var img = new Image();
                    img.crossOrigin = 'Anonymous'; //解决跨域问题
                    img.onload = function(){
                        if(n == 0){
                            ctx.drawImage(img,0,0,750,1334);
                            ctx.font = '30px Adobe Ming Std';
                            
                            ctx.fillText(showContent,250,800);
                            ctx.fillText('文字文字',250,850);
                        }else{
                            ctx.drawImage(img,250,900,250,250);
                        }
                        f(n+1);
                    }
                    
                    img.src = imgsrcArray[n];
                }else{
                    self.downloadUrl = canvas.toDataURL("image/jpeg");
                    self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
                }
            })(0);
        }

本例中将一张背景图与二维码图合成一张图片 ,

二维码的生成也需要在此方法之前。

html:

<img style="width:100%;" :src="'data:image/jpeg;base64,' + downloadUrl" alt="">
<div style="opacity:0;position:absolute;bottom:0;" id="qrcode"></div>