data() {
return {
logoimg:'',//logo图片
ctx:'',
qrBase64:'',//二维码地址
}
}
//点击下载按钮访问
扫描二维码关注公众号,回复: 13380555 查看本文章downloadposterPicture(){
var canvas = document.createElement('canvas');
this.ctx = canvas.getContext('2d');
canvas.width =750 ;
canvas.height =1624 ;
//使用箭头函数解决this烦人指向问题
this.drawImg('/static/api/img/share/posterbg.png','bg',0,0,750,1624,()=>{
this.drawImg(this.logoimg,'logo',43,30,120,120,()=>{
this.drawImg(this.qrBase64,'qr',200,1090,367,367,()=>{
this.fileDownload(canvas.toDataURL(), "海报.jpg");
// console.log(canvas.toDataURL())
})
})
})
},
// 绘制图片
drawImg(src,type,left,top,width,height,fun){
var img=new Image();
img.crossOrigin = 'Anonymous'; // 重点!设置image对象可跨域请求
img.οnlοad=()=>{
this.ctx.drawImage(img,left,top,width,height);
fun&&fun();
};
img.src =src+ "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加
},
//下载二维码
createPicture() {
let domObj = document.getElementById("poster-qr");
html2canvas(domObj, {
backgroundColor: null,
}).then((canvas) => {
var imgData = canvas.toDataURL("image/jpeg");
this.fileDownload(imgData, "二维码.jpg");
});
},