1.创建canvas
getxjb() {
this.$nextTick(() => {
this.mycan = document.getElementById("myCanvas");
var ctx = this.mycan.getContext("2d");
var img = new Image();
img.src = require("../../assets/images/yq.png"); //获取本地图片 必须用 require
var img2 = new Image();
img2.src = "http://" + this.getInviteInfo_data.downCode.codeImgAndroid;
img2.setAttribute("crossOrigin", "anonymous");
img.onload = () => {
//图片加载完毕后再进行
img2.onload = () => {
ctx.drawImage(img, 0, 0, 375, 672);
ctx.drawImage(img2, 107, 330, 160, 160);
ctx.fillStyle = "#fff";
ctx.font = "20px Arial ";
ctx.fillText(this.getInviteInfo_data.invitation_code, 145, 520);
};
};
});
},
2.保存为图片
toImage() {
var canvas = document.getElementById("myCanvas");
var image = new Image();
image.src = canvas.toDataURL("image/png");
//动态创建a标签并出发a的下载时间
let a = document.createElement("a");
a.download = "invitation";
a.href = image.src;
a.click();
},
3.canvas 图片跨域,无法保存为图片
[解决方法](https://www.jianshu.com/p/436caf91dd06)
github地址
https://github.com/h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60ae281110a5b0/src/.htaccess#L36-L53