如何将canvas截图插入dom中以及如何将canvas转为文件对象并下载到本地

//安装html2canvas插件并引入
import html2canvas from "html2canvas";

 1.在dom中插入canvas截图

//点击生成图片按钮，在页面中插入与canvas大小相等的图片
creatPic() {
        // 获取设备的PixelRatio
      let getPixelRatio = function (context) {
        // 辅助存储器
        let backingStore =
          context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio ||
          1;
        return (window.devicePixelRatio || 1) / backingStore;
      };
      // 取截图对应的 DOM 元素选择器
      let shareContent = document.getElementById("targetDom");
      let width = shareContent.offsetWidth;
      let height = shareContent.offsetHeight;
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      let scale = getPixelRatio(context); 
      //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      context.scale(scale, scale);
      let opts = {
        scale: 1,
        canvas: canvas,
        width: width,
        height: height,
        dpi: window.devicePixelRatio,
      };
      html2canvas(shareContent, opts).then(function (canvas) {
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        let dataUrl = canvas.toDataURL("image/jpeg", 1.0);
        let newImg = document.createElement("img");
        newImg.src = dataUrl;
        newImg.width = width;
        newImg.height = height;
        document.body.appendChild(newImg);
        const base64 =dataUrl.toString().substring(dataUrl.indexOf(",") + 1)
        console.log(base64);
      });
    },

2. 将canvas图片下载到本地

//点击下载按钮，将echarts图下载到本地
const downLoadFn = () => {
  // 获取设备的PixelRatio
  let getPixelRatio = function (context) {
    // 辅助存储器
    let backingStore =
      context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio ||
      1;
    return (window.devicePixelRatio || 1) / backingStore;
  };
  // 取截图对应的 DOM 元素选择器
  let shareContent = document.getElementById("tree");
  let width = shareContent.offsetWidth;
  let height = shareContent.offsetHeight;
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  let scale = getPixelRatio(context);
  //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
  canvas.width = width * scale;
  canvas.height = height * scale;
  canvas.style.width = width + "px";
  canvas.style.height = height + "px";
  context.scale(scale, scale);
  let opts = {
    scale: 1,
    canvas: canvas,
    width: width,
    height: height,
    dpi: window.devicePixelRatio,
  };
  html2canvas(shareContent, opts).then(function (canvas) {
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    let dataUrl = canvas.toDataURL("image/jpeg", 1.0);
    // 将base64转为文件对象
    var arr = dataUrl.split(","),
      type = arr[0].match(/:(.*?);/)[1], // 此处得到的为文件类型
      bstr = atob(arr[1]), // 此处将base64解码
      n = bstr.length,
      u8arr = new Uint8Array(n);
      console.log(type,bstr);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    // 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
    var file = new File([u8arr], "装备设备结构关系描述", { type: type });
    // 将文件对象通过a标签下载
    var aDom = document.createElement("a"); // 创建一个 a 标签
    aDom.download = file.name; // 设置文件名
    let href = URL.createObjectURL(file); // 将file对象转成 UTF-16 字符串
    aDom.href = href; // 放入href
    document.body.appendChild(aDom); // 将a标签插入 body
    aDom.click(); // 触发 a 标签的点击
    document.body.removeChild(aDom); // 移除刚才插入的 a 标签
    URL.revokeObjectURL(href); // 释放刚才生成的 UTF-16 字符串
  });
};

参考文章：canvas转成为图片并下载为本地图片文件_lit_finger的博客-CSDN博客_canvas转图片下载