利用html2canvas实现图片加水印

 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);

你可能感兴趣的:(vue)