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

  base64, canvas, javascript, node.js

Objective: After converting two canvas elements as a data url, I am sending it to my server, so I can create a new buffer from a base 64. Then i’m going to convert the two buffers back to a base64 and send both buffers and base64 strings to my mongoDB.


  1. I am sending leftsidestate and rightsidestate to my server
constructor(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. in my handleSubmit I am converting my canvas elements to dataURLs and trimming them and sending it to my server. I am not sure the correct way to trim them but they both give me similar results…
handleSubmit(event) {

        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 = {

      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) => {


leftsidestate and rightsidestate imgstrings after DataURl and trimming them.

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

server-side:'/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') i get a 500 internal server error

2)inside imgstring1 and imgstring2, i get a super long string that looks wrong. both string print out something similar to:


and it goes on for quite a white but eventually makes a stop

final notes: why do I have to create an image buffer as well as a base64 string and send those to my mongoDB server? why not just the base64 string? I have seen a couple posts do this, but I do not fully understand why

Source: Ask Javascript Questions