Send canvas.toDataURL images to nodejs-CodePudding

I'm trying to send image from front-end script to my server.

Front-end script:

var img_data = canvas.toDataURL('image/jpg'); // contains screenshot image
// Insert here POST request to send image to server

And I'm trying to accept the data in the backend and store it into req.files to be able to access like this:

const get_image = (req, res) => {
    const File = req.files.File.tempFilePath;
}

What way can I do to send the image to the server and get the image like in the example above?

CodePudding user response：

your img_data is a base 64 string, which you can send to server directly in a post request

e.g.

await fetch('/api/path', { method: 'POST', headers: { "content-type": "application/json"}, body: JSON.stringify({ file: img_data }) });

On your backend, you can convert this string to binary, and save to file.

var fs = require('fs');

app.post('/api/path', async (req, res) => {
     const img = req.body.file;
     var regex = /^data:. \/(. );base64,(.*)$/;

     var matches = string.match(regex);
     var ext = matches[1];
     var data = matches[2];
     var buffer = Buffer.from(data, 'base64'); //file buffer
      
     .... //do whatever you want with the buffer

     fs.writeFileSync('imagename.'   ext, buffer); //if you do not need to save to file, you can skip this step.
     
     ....// return res to client


})

CodePudding user response：

You have to convert it to a Blob first, and then append it to a Form. The form would be the body of the request that you send to server.

canvas.toBlob(function(blob){
    var form = new FormData(),
    request = new XMLHttpRequest();

    form.append("image", blob, "filename.png");
    request.open("POST", "/upload", true);
    request.send(form);
}, "image/png");