export default {
data() {
 return {
   image: '' // 存儲(chǔ)數(shù)據(jù)
  }
}
 mounted() {
  setTimeout(() => {
      // 拿到當(dāng)前dom里 你需要截取的位置的id
      const dom = document.querySelector("#cesium canvas");
      if (dom) {
        // 將選擇的dom元素轉(zhuǎn)換為PNG格式的DataURL字符串，打印出來是base64數(shù)據(jù)
        this.image = dom.toDataURL("image/png");
      }
   },500)
 }
}

methods: {
     base64ImgtoFile(dataurl, filename = "file") {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = dataurl;
        image.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0);
          canvas.toBlob((blob) => {
            const file = new File([blob], `${filename}.png`, {
              type: "image/png"
            });
            resolve(file);
          }, "image/png");
        };
        image.onerror = (error) => reject(error);
      });
    },
    async convertBase64ToPNG(dataurl, fileName) {
      try {
        const file = await this.base64ImgtoFile(dataurl, fileName);
        // 使用轉(zhuǎn)換后的文件進(jìn)行后續(xù)操作
        return file;
      } catch (error) {
        console.error(error);
      }
    },
}

<template>
  <el-button @click="handleSaveMap">提交</el-button>
</template>
<script>
export default {
  data() {
    return {
      image: "" // 存儲(chǔ)數(shù)據(jù)
    };
  },
  mounted() {
    setTimeout(() => {
      // 拿到當(dāng)前dom里 你需要截取的位置的id
      const dom = document.querySelector("#cesium canvas");
      if (dom) {
        // 將選擇的dom元素轉(zhuǎn)換為PNG格式的DataURL字符串，打印出來是base64數(shù)據(jù)
        this.image = dom.toDataURL("image/png");
      }
    }, 500);
  },
  methods: {
    base64ImgtoFile(dataurl, filename = "file") {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = dataurl;
        image.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0);
          canvas.toBlob((blob) => {
            const file = new File([blob], `${filename}.png`, {
              type: "image/png"
            });
            resolve(file);
          }, "image/png");
        };
        image.onerror = (error) => reject(error);
      });
    },
    async convertBase64ToPNG(dataurl, fileName) {
      try {
        const file = await this.base64ImgtoFile(dataurl, fileName);
        // 使用轉(zhuǎn)換后的文件進(jìn)行后續(xù)操作
        return file;
      } catch (error) {
        console.error(error);
      }
    },
    // 存儲(chǔ)數(shù)據(jù)到服務(wù)端
    async generateImages(image) {
      const file = new FileReader(); // 創(chuàng)建對象
      file.readAsDataURL(image); // 讀取文件
      const res = await uploadApi.uploadImage(image); // 對接上傳接口
      const { object, msg, success } = res.data;
      if (success) {
        this.areaPicture = object.key;
      } else this.$message.error(msg);
    },
    // 保存數(shù)據(jù)
    async handleSaveMap() {
      const loading = this.$loading({
        lock: true,
        text: "保存中，請稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // 截取當(dāng)前窗口數(shù)據(jù)
      await this.screenshotView();
      // 轉(zhuǎn)換當(dāng)前base64圖片數(shù)據(jù)為png
      let image = await this.convertBase64ToPNG(this.image, this.mapName);
      // 存儲(chǔ)到服務(wù)端
      if (image) {
        await this.generateImages(image);
        console.log(this.areaPicture, "this.areaPicture");
      }
      loading.close();
    }
  }
};
</script>