今天遇到一个问题:生产海报
翻箱倒柜,发现这个玩意我不会,那就学习一下吧。
简单记录一下
首先:npm 安装插件: npm install --save html2canvas
然后:在具体页面里引入 import html2canvas from "html2canvas"
然后:
downloadImg:function(){
new html2canvas(document.getElementById('tempPoster'),{
useCORS: true,
allowTaint: true // 这两个属性都是图片跨域相关属性
}
).then(canvas => {
// canvas为转换后的Canvas对象
let tempImg = new Image();
tempImg.src = canvas.toDataURL(); // 导出图片
// 本地
// this.downloadLocMethod(tempImg.src, '海报')
// 牵扯跨域
this.downloadNetMethod(tempImg.src, '海报')
});
},
downloadLocMethod:function(src,name){//下载图片地址和名称
// // document.body.appendChild(oImg); // 将生成的图片添加到body
var eleLink = document.createElement("a");
eleLink.href = src; // 转换后的图片地址
eleLink.download = name;
document.body.appendChild(eleLink);
// 触发点击
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
},
downloadNetMethod:function(imgsrc, name) {//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
站在巨人的肩膀上,学习就是香。
鸣谢