vue3 canvas生成图片以绝对路径的方式发送给后端

你可以将生成的图片转换为 base64 编码，然后将其作为表单数据发送给后端，在后端进行解码和保存。

以下是一个使用 Vue3 和 canvas 生成 base64 图片并将其发送到后端的示例：

<template>
  <div>
    <canvas ref="canvas" width="300" height="300"></canvas>
    <button @click="generateImage">Generate Image</button>
    <button @click="saveImage">Save Image</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageDataURL: null,
    };
  },
  methods: {
    generateImage() {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d");
      context.fillStyle = "red";
      context.fillRect(0, 0, canvas.width, canvas.height);
      this.imageDataURL = canvas.toDataURL();
    },
    saveImage() {
      const formData = new FormData();
      formData.append("image", this.imageDataURL);
      fetch("/api/save-image", {
        method: "POST",
        body: formData,
      }).then((response) => {
        console.log(response);
      });
    },
  },
};
</script>

在上面的示例中，我们首先使用 `canvas.toDataURL()` 方法生成一个 base64 编码的图片，并将其存储在组件的 `imageDataURL` 属性中。

然后，当用户点击 "Save Image" 按钮时，我们将 `imageDataURL` 作为表单数据发送到后端的 `/api/save-image` 接口。

在后端，你可以使用类似以下的 Node.js 代码来解码和保存图片：

const fs = require("fs");

app.post("/api/save-image", (req, res) => {
  const imageDataURL = req.body.image;
  const imageData = imageDataURL.replace(/^data:image\/\w+;base64,/, "");
  const buffer = Buffer.from(imageData, "base64");
  fs.writeFile("/path/to/image.png", buffer, (err) => {
    if (err) {
      console.error(err);
      res.status(500).send("Error saving image");
    } else {
      res.status(200).send("Image saved");
    }
  });
});

在上面的示例中，我们首先从请求体中获取 base64 编码的图片数据，并将其解码为二进制数据。

然后，我们使用 Node.js 的 `fs.writeFile()` 方法将二进制数据写入到指定的文件路径中。如果出现错误，我们将发送一个 500 错误响应，否则我们将发送一个 200 成功响应。

请注意，此示例代码并不完整，并且可能需要根据你的具体需求进行调整。