Javascript 如何将canvas元素转换为缓冲区和base64，以便服务器可以发送到mongoDB？

目标：将两个画布元素转换为数据url后，我将其发送到我的服务器，这样我就可以从base 64创建一个新的缓冲区。然后我将把这两个缓冲区转换回base64，并将缓冲区和base64字符串发送到我的mongoDB

背景：

app.post('/create', function(req, res) {
  console.log("does something")
  var imgstring = req.body.leftsidestate;
  var imgstring2 = req.body.rightsidestate;
  console.log("image string is " , imgstring);
  console.log("image string2 is " , imgstring2);

  
  //buffer stores raw data (raw memory)

  var image = Buffer.from(imgstring, 'base64'); //stops at this line
  console.log("does this statement reach first");
  console.log("image is " + image);

  var newimage = image.toString('base64');
  console.log("does this statement reach");

  console.log("image is", image);
  console.log("new image is", newimage);

  var image2 = Buffer.from(imgstring2, "base64");
  var newimage2 = image2.toString('base64');
  console.log("image2 is" + image2);
  console.log("new image2 is" + newimage2);

});

我正在向我的服务器发送

leftsidestate

和

righsidestate

在我的

handleSubmit

中，我正在将画布元素转换为DataURL，并对它们进行修剪，然后将其发送到我的服务器。我不确定修剪它们的正确方法，但它们都给了我类似的结果

leftsidestate

和

rightsidestate

imgstring在DataURl之后并修剪它们

left side state is  {imgstring1: "iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAE…r2Ecv28dBuxXH/V6MDvrx/+44U1UZtWeZAAAAAElFTkSuQmCC"}

服务器端：

app.post('/create', function(req, res) {
  console.log("does something")
  var imgstring = req.body.leftsidestate;
  var imgstring2 = req.body.rightsidestate;
  console.log("image string is " , imgstring);
  console.log("image string2 is " , imgstring2);

  
  //buffer stores raw data (raw memory)

  var image = Buffer.from(imgstring, 'base64'); //stops at this line
  console.log("does this statement reach first");
  console.log("image is " + image);

  var newimage = image.toString('base64');
  console.log("does this statement reach");

  console.log("image is", image);
  console.log("new image is", newimage);

  var image2 = Buffer.from(imgstring2, "base64");
  var newimage2 = image2.toString('base64');
  console.log("image2 is" + image2);
  console.log("new image2 is" + newimage2);

});

问题：

app.post('/create', function(req, res) {
  console.log("does something")
  var imgstring = req.body.leftsidestate;
  var imgstring2 = req.body.rightsidestate;
  console.log("image string is " , imgstring);
  console.log("image string2 is " , imgstring2);

  
  //buffer stores raw data (raw memory)

  var image = Buffer.from(imgstring, 'base64'); //stops at this line
  console.log("does this statement reach first");
  console.log("image is " + image);

  var newimage = image.toString('base64');
  console.log("does this statement reach");

  console.log("image is", image);
  console.log("new image is", newimage);

  var image2 = Buffer.from(imgstring2, "base64");
  var newimage2 = image2.toString('base64');
  console.log("image2 is" + image2);
  console.log("new image2 is" + newimage2);

});

1）

var image=buffer.from（imgstring，'base64'）

我得到一个500内部服务器错误

2） 在

imgstring1

和

imgstring2

中，我得到了一个看起来错误的超长字符串。两个字符串都打印出类似的内容：

BtwD5k6bEIohztw3/VGxVBcLBVFpqxc9Ab/nt1fQMHUwarxc4PQjITqRDXRRGT/9T/+SW3bmEoBEzxcgO5NwbpXsMt4InVbyYZGbOMkgZFUgbAACp0kOaY5CNhNnCx+VUvJm6YAJqKmaQMUFoDAhC+psCfTvxS7pTeiouXVuKU0LmhbdY/pn7mMnHIqfoD5bEg82m3bbslTcmz61V2XmlORT/la64RrubPST4oVFxktOK07qTXdQRx3RrFf9OMPX/w8TndOI29heNbzNYQ7wweGSfq9myQ4oP3dGfUAKJ0EjJGbbWgWSzos5vetOixuDIrT3e2NCJxtvChlJXxrI7ukUePDxUCQFBceZLXrPDQ6yVcqNjwsfD8Z8a0sV6HA7u7ux6C/oxvo9uZOKTJgYIdH+8oDlF4UVf6uyZec8tL9rRb6cxQkOSfg5xSOzWKjKFyrrmWR0+gKlfQdtexz6NgA3lnSkOrM6yPIgU6djSMdIj7fUDY4fTkoSIQ+PT5VgOv11Y0efpYAHHA//elPVZh4LSwaREvQQwir3Gk249FQfLDmEEVSxAio6PSGxMpDCiGPA3uzVjGH2U5Twj/zUMtBgg6OJQL2Nou5wl2lCRQtgmJJJqQ/g3xnpMWUMvygoxB4kgo7YzjjPK+BE5s/w/flM4J8yv1BETOvEbpCOzZ7w7jabuP9fBXLTj/qfBjDnVHk/U60+lls822ss3VsKndp6ookFHZWw70FuHnt9upK04OI32CwSTjfjLEc1ljcECWP7pWgjoxEnBJpmSkSbKyVWMUmTck/CadKdk52Em5yHnjePHoa/UmdH

它持续了相当长的一段时间，但最终停了下来

---

最后注意事项：为什么我必须创建图像缓冲区和base64字符串并将它们发送到我的mongoDB服务器？为什么不仅仅是base64字符串？我已经看到一些帖子这样做了，但我不完全理解为什么错误来自于试图在对象上使用

缓冲区

在您拥有的UI上

let leftsidestate = this.state.leftsidestate;
leftsidestate.imgstring1 = trimmedURl; //  <-- nested structure here!!
this.setState({ leftsidestate: leftsidestate });

那么这个,

const imgs = {
    leftsidestate,
    rightsidestate
};

换言之：

const imgs = {
    leftsidestate: {imgstring1: 'some long string'},
    rightsidestate: {imgstring2: 'another long string'}
};

要解决此问题，只需替换
leftsidestate.imgstring1=trimmedURl带有
leftsidestate=trimmedURl
和
rightsidestate.imgstring2
和
rightsidestate=trimmedURl2
您好，谢谢您的建议，我没有收到500个内部错误，但是，我仍然收到一个看起来有点奇怪的超长字符串。与我第二期中的字符串非常相似。这个字符串基本上占据了我所有的终端。我应该担心还是这很正常？对于图像的base64表示，“超长字符串”看起来不错。通过使用
data:image/jpg；base64，
放在字符串前面，并将其放在浏览器URL中，类似于
data:image/jpg；base64，
如果它打开的很好，那么您可以通过执行
var image=Buffer.from（imgstring，'base64'）
然后
var newimage=image.toString（'base64'）
基本上会返回相同的
imgstring
。如果您通过了
缓冲区，您可以完全跳过该部分，只存储
imgstring
（base64字符串）。从
可以确保您获得了有效的
base64
字符串。谢谢！问题不是console.log（“image is”，image），而是console.log（image），整个字符串都打印出来了！
const imgs = {
    leftsidestate,
    rightsidestate
};

const imgs = {
    leftsidestate: {imgstring1: 'some long string'},
    rightsidestate: {imgstring2: 'another long string'}
};