vue & html2canvas 导出图片

导出图片&添加水印

<div>
  <a-button @click="toPic">导出</a-button>
  <div id="canvasToPic">要导出的内容区域</div>
</div>

import html2canvas from "html2canvas"

toPic() {
  window.scrollTo(0,0);
  this.$nextTick(() => {
    html2canvas(document.getElementById('canvasToPic'), {
      //设置放大的倍数
      scale: 1,
      // 页面有滚动条时设置，若不加导出图片为当前可视区域
      height: document.getElementById('canvasToPic').scrollHeight,
      windowHeight: document.getElementById('canvasToPic').scrollHeight,
      backgroundColor: null,
    }).then(canvas => {
      // 水印
      const watermark = document.createElement("canvas");
      watermark.width = 300;
      watermark.height = 150;

      const wmCtx = watermark.getContext("2d");
      wmCtx.lineWidth = "1"; //用宽度为 1 像素的线条绘制
      wmCtx.font = "bold 20px Arial";
      wmCtx.textBaseline = "middle";
      wmCtx.fillStyle = "rgba(0 , 255 , 255 , 0.5)";
      wmCtx.fillText("== 水印 ==", 20, 50);
      wmCtx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height);

      const ctx = canvas.getContext("2d");
      ctx.fillStyle = ctx.createPattern(watermark, 'repeat');
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      //回调中返回的其实就是一个canvas对象
      //可以使用canvas的toDataURL方法生成图片链接
      //url就是生成的链接可直接写入image标签的src中展示
      this.url= canvas.toDataURL("image/png");
      //创建一个a标签
      const link= document.createElement("a");
      //将生成的图片url赋值给a标签的href属性
      link.href = this.url;
      //设置下载的文件名
      link.download = "页面导出";
      //将a标签插入dom中
      document.body.appendChild(link);
      //模拟点击事件触发下载
      link.click();
      //完成之后销毁创建的a标签
      document.body.removeChild(link);
    });
  });
},