html2canvas页面转图片保存

一、遇到的坑

1、生成出来的图片清晰度不高；
2、生成的图片背景透明是PNG样式；
3、画布要渲染元素中的img，要开启跨域；

二、直接上代码

<div id="box">
      你好
      <img
        width="100%"
        height="100%"
        src="https://img2.baidu.com/it/u=3466700259,4097460871&fm=26&fmt=auto"
        alt=""
      />
</div>

import html2canvas from "html2canvas";

mounted() {
  // 这里直接写在了钩子函数里，方便测试； 
  const box = document.querySelector("#box");
  const canvasConfig = {
    scale: 2,
    background: "#fff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
    dpi: 350, // 处理模糊问题
    useCORS: true, // 允许渲染跨域图片
  };
  html2canvas(box, canvasConfig).then((canvas) => {
    document.body.appendChild(canvas); // 渲染到页面看看效果
    const url = canvas.toDataURL("image/png", 1.0); // url 为canvas的图片地址
  });
},
methods: {
  // 下载图片
  save() {
    // 创建a标签 作为下载
    var a = document.createElement("a");
    // 创建鼠标点击事件
    var event = new MouseEvent("click");
    // 下载文件的名称
    a.download = this.imgUrl || "下载图片名称";
    a.href = this.imgUrl;
    a.dispatchEvent(event);
    // 可以提示保存成功
  }
}