Vue で、現在のウィンドウのスクリーンショットを撮り、データベース 64 を png 形式に変換してサーバーに送信します。

目次

序文

1. 現在のウィンドウのスクリーンショットを撮り、データを保存します

2.base64をpngに変換するメソッドを定義する

3. 完全なコード

要約する

---

序文

レコードは要件から生まれます

---

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);
        // 使用转换后的文件进行后续操作
        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);
        // 使用转换后的文件进行后续操作
        return file;
      } catch (error) {
        console.error(error);
      }
    },
    // 存储数据到服务端
    async generateImages(image) {
      const file = new FileReader(); // 创建对象
      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>

---

要約する

役に立ったら高評価をお願いします~