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

Question

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

背景：

1. 我正在将leftsidestate和rightsidestate发送到我的服务器

constructor(props) {
super(props)
this.myRef = React.createRef();
this.pref = React.createRef();
this.secondmyRef = React.createRef();
this.state = {
isFlipped: false,
happy: HAPPINESS,
leftsidestate: { //sending this to my server
imgstring1: '' 
},
rightsidestate: { //sending this to my server
imgstring2: ''
},
dogpic: null,
newdog: null
}
this.updateCanvas = this.updateCanvas.bind(this);
this.updateCanvas2 = this.updateCanvas2.bind(this);
// this.convertfirstcanvastoimage = this.convertfirstcanvastoimage.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

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

handleSubmit(event) {
event.preventDefault()
const canvas = this.myRef.current;
const imgUrl = canvas.toDataURL();
const trimmedURl = imgUrl.split(';base64,')[1];
// console.log("trimmed url is", trimmedURl);
let leftsidestate = this.state.leftsidestate;
leftsidestate.imgstring1 = trimmedURl;
this.setState({ leftsidestate: leftsidestate
});
console.log("left side state is ", this.state.leftsidestate)  
const canvas2 = this.secondmyRef.current;
const imgUrl2 = canvas2.toDataURL();
const trimmedURl2 = imgUrl2.split(",")[1]
// console.log("trimmed url2 is", trimmedURl2);
let rightsidestate = this.state.rightsidestate;
rightsidestate.imgstring2 = trimmedURl2;
this.setState({ rightsidestate: rightsidestate
});
console.log("right side state is ", this.state.rightsidestate)

const imgs = {
leftsidestate,
rightsidestate
};
const data = this.state.leftsidestate;
fetch( 'http://localhost:9000/create', {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(imgs)
})
.then((response) => response.json())
.then((result) => {
console.log(result)
})


}

CCD_ 4和CCD_。

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

right side state is  {imgstring2: "iVBORw0KGgoAAAANSUhEUgAABhIAAAPpCAYAAADwxrdTAAAgAE…BAgQIECBAgAABAgQIEMgIDPDFttIVFDqyAAAAAElFTkSuQmCC"}

服务器端：

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字符串呢？我见过一些帖子这样做，但我不完全理解为什么

Answer 1

错误来自于尝试在Object上使用Buffer.from，而不是在base64字符串上使用。

在UI上有

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

因此CCD_ 10就是这样一个

{imgstring1: 'some long string'}

然后这个：

const imgs = {
leftsidestate,
rightsidestate
};

翻译为：

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

要解决此问题，只需将leftsidestate.imgstring1 = trimmedURl;替换为CCD_ 12和CCD_ 13与CCD_