vue项目中实现利用html2canvas库将一个页面中部分区域或者整个页面截图保存为图片，然后上传到数据库。

在项目中有一个功能是需要把一个页面的一小部分区域截图保存为图片，然后将该图片上传到数据库。这里我使用的是html2canvas库，它的原理是将 DOM 元素转换为图像，将HTML元素转换为Canvas，并生成图片。

首先在项目中安装html2canvas库：

npm install html2canvas

 在需要截图的区域引入html2canvas库：

import html2canvas from "html2canvas";

下面展示我需要截图区域的dom结构：

<div class="choice-content" ref="screenshotArea">
     <div
        v-for="(terrain, index) in terrains"
        :key="index"
        class="terrain-item"
        >
        <img :src="terrain.imageSrc" alt="" />
         <div
          v-if="terrain.clickable"
          class="plan-terrain animation-common"
          @click="openChoice(terrain.id)"
          >
           {{ terrain.label }}
         </div>
     </div>
  </div>

js代码：

//规划图截图区域
const screenshotArea = ref(null);
//截图并将其和其他数据一起处理为FormData对象的方法
const takeScreenShot = async () => {
  if (screenshotArea.value) {
    //  将 screenshotArea 引用的 DOM 元素转换为 canvas
    const canvas = await html2canvas(screenshotArea.value, {
      useCORS: true, //表示在跨域的情况下使用CORS（跨域资源共享）来加载图像，以确保正常渲染,最终生成一个Canvas对象。
      logging: false, //关闭html2canvas库对于处理过程的控制台日志输出
    });
    //canvas.toBlob 方法将 canvas 转换为 Blob 对象，使用 new Promise 包装 canvas.toBlob，使其返回一个 Promise，从而可以使用 await 等待其完成。
    const blob = await new Promise((resolve) => {
      //canvas.toBlob((blob) => { resolve(blob); }, 'image/png'); 表示将 canvas 转换为 PNG 格式的 Blob，并通过 resolve 回调将 Blob 传递给外部 Promise。
      canvas.toBlob((blob) => {
        resolve(blob);
      }, "image/png");
    });
    // 将 Blob 对象转换为 File 对象,第一个参数是一个包含 Blob 的数组,第二个参数是文件名 'screenshot.png',第三个参数是文件的 MIME 类型 { type: 'image/png' }。
    const dataUrl = new File([blob], "screenshot.png", { type: "image/png" });
 
    //创建一个新的FormData对象，其是一个用于在http请求中传输表单数据的特殊对象。
    const formData = new FormData();
    formData.append("file", dataUrl);
    formData.append("studentId", userStoreData.user.currentRoleId);
    formData.append("pastoralId", userStoreData.user.pastoralId);
    formData.append("phase", userStoreData.user.phase);
    formData.append("placeIndex", 2);

    savaPlanReportImg(formData);
  }
};
//规划图保存接口
const savaPlanReportImg = async (data) => {
  try {
    const res = await proxy.$http.topNav.savaPlanReportImgData(data);
    if (res && res.status == 2000) {
      ElMessage.success("规划图保存成功");
    }
  } catch (error) {
    ElMessage.error("规划图保存失败");
  }
};

图片的格式根据自己需求变更，我这里是png格式。