save base64 image data client to Nodejs server

Question

I have create an Canvas based app where user can makes custom design and upload to server, I want to blob object to server then again change it to base64 data and create images on server.

first I tried to send it by crating blobs of base64 Image data here my Client side code

 import b64toBlob from 'b64-to-blob';

postData(_canvasData){
    var contentType = 'image/png';
    var imgData = _canvasData.replace(/^data:image\/[a-z]+;base64,/, "");
    var blob = b64toBlob(imgData, contentType);

   axios.post('/facedata/'+imgData)
.then(function(res){
    console.log(res)
}).catch(function(err){
    console.log(err,"<<<error")
})
    
}
    

function dataURItoBlob(dataURI, callback) {
var byteString = atob(dataURI.split(',')[1]);
    
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab]);
    return bb;
    };

My NodeJS server code

var blobToBase64 = require('blob-to-base64');
var FileReader = require('filereader')

app.post("/facedata/:canvasData",function(req,res){
  //req.params.canvasData returning blob object

 //This shows error unable to read object blob
 var reader = new FileReader();
    reader.addEventListener('load',function(ev){
        console.log("dataUrlSize:", ev.target.result.length);
    })        
    reader.readAsDataURL(blob);

//This Shows Error window not found

   blobToBase64(blob,function(error,data){
    console.log(data,"<base64Data");
})
}

Answer 1

Try solving your issue using this approach:

Assuming your canvas looks something like this:

<canvas id="myCanvas"></canvas>

1. Convert the canvas image to dataURL (base64)

    var dataURL = canvas.toDataURL(); 
   

2. Send data to required route using an AJAX request

    $.ajax({
         type: "POST",
         url: "/facedata",
         data: { 
              imgBase64: dataURL
         }
     }).done(function(o) {
            console.log('saved'); 
   
       });
   

3. In your NodeJS route, do something like this. This code will save the received image on your server: -

       router.post('/facedata', function(req, res) {
           var base64Data = req.body.imgBase64.replace(/^data:image\/png;base64,/, "");
           fs.writeFile(<path-to-file>.png, base64Data, 'base64', function(err) {
               if(err){
                  console.log(err);
                }
           });