[js] 实现多张图片合成一张的效果

原理是使用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>