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

Question

目标： 将两个画布元素转换为数据 url 后，我将其发送到我的服务器，因此我可以从 base 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);

    }

1. 在我的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)
        })
  

       
    }

leftsidestate 和 rightsidestate 在 DataURl 之后的 imgstrings 并修剪它们。

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 字符串上。

在您拥有的用户界面上

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

因此leftsidestate 是这样的对象

{imgstring1: 'some long string'}

然后这个：

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