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

Question

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

背景：

我正在向我的服务器发送 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);

    }

在我的 handleSubmit 中，我正在将我的 canvas 元素转换为数据 URL，然后 trim 将它们发送到我的服务器。我不确定 trim 它们的正确方法，但它们都给我类似的结果...

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 imgstrings 在 DataURl 之后 trimming 它们。

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

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

在 UI 你有

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

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

how to convert canvas element to a buffer and a base64 so server can send to mongoDB?

javascript

base64

canvas

node.js