[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>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。

主目录

与歌谣一起通关前端面试题