将数据从html canvas保存到mongodb集合

<canvas id="myCanvas"></canvas>
<button onclick="saveToMongoDB()">保存到MongoDB</button>

<script>
  function saveToMongoDB() {
    var canvas = document.getElementById("myCanvas");
    var dataURL = canvas.toDataURL(); // 获取Canvas上的图像数据

    // 发送数据到后端
    fetch("/saveToMongoDB", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ dataURL: dataURL }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error("保存失败:", error);
      });
  }
</script>

const express = require("express");
const mongoose = require("mongoose");

const app = express();
app.use(express.json());

// 连接到MongoDB数据库
mongoose.connect("mongodb://localhost/mydatabase", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 定义数据模型
const ImageSchema = new mongoose.Schema({
  dataURL: String,
});

const Image = mongoose.model("Image", ImageSchema);

// 处理保存到MongoDB的请求
app.post("/saveToMongoDB", (req, res) => {
  const { dataURL } = req.body;

  // 创建新的图像对象
  const newImage = new Image({ dataURL });

  // 保存图像对象到MongoDB集合
  newImage.save((error, savedImage) => {
    if (error) {
      console.error("保存失败:", error);
      res.status(500).json({ error: "保存失败" });
    } else {
      console.log("保存成功:", savedImage);
      res.json({ message: "保存成功" });
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log("服务器已启动");
});