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