1.图片的div加上ref
2.将需要的水印定位上去
3.调用html2canvas方法生成新的图片地址
html2canvas(this.$refs.addImage, {
useCORS: true,
backgroundColor: null,
}).then((canvas) => {
this.downUrl = canvas.toDataURL("image/png");
});
4.创建img进行下载
参考:
let a = document.createElement("a");
let clickEvent = document.createEvent("MouseEvents");
a.setAttribute("href", url);
a.setAttribute("download", "codeImg");
a.setAttribute("target", "_blank");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);