Vue如何將當前窗口截圖并將數據base64轉為png格式傳給服務器

更新時間：2023年10月11日 14:42:58 作者：vanora1111

這篇文章主要介紹了Vue如何將當前窗口截圖并將數據base64轉為png格式傳給服務器,通過實例代碼介紹了將當前窗口截圖,并將數據存儲下來,需要的朋友可以參考下

前言

記錄來源于需求

1、將當前窗口截圖，并將數據存儲下來

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

2、定義將base64轉png的方法

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);
        // 使用轉換后的文件進行后續(xù)操作
        return file;
      } catch (error) {
        console.error(error);
      }
    },
}

3、完整代碼

<template>
  <el-button @click="handleSaveMap">提交</el-button>
</template>
<script>
export default {
  data() {
    return {
      image: "" // 存儲數據
    };
  },
  mounted() {
    setTimeout(() => {
      // 拿到當前dom里 你需要截取的位置的id
      const dom = document.querySelector("#cesium canvas");
      if (dom) {
        // 將選擇的dom元素轉換為PNG格式的DataURL字符串，打印出來是base64數據
        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);
        // 使用轉換后的文件進行后續(xù)操作
        return file;
      } catch (error) {
        console.error(error);
      }
    },
    // 存儲數據到服務端
    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);
    },
    // 保存數據
    async handleSaveMap() {
      const loading = this.$loading({
        lock: true,
        text: "保存中，請稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // 截取當前窗口數據
      await this.screenshotView();
      // 轉換當前base64圖片數據為png
      let image = await this.convertBase64ToPNG(this.image, this.mapName);
      // 存儲到服務端
      if (image) {
        await this.generateImages(image);
        console.log(this.areaPicture, "this.areaPicture");
      }
      loading.close();
    }
  }
};
</script>