0

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?

Someone Special
  • 12,479
  • 7
  • 45
  • 76
cha
  • 131
  • 2
  • 10

2 Answers2

1

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


})
Someone Special
  • 12,479
  • 7
  • 45
  • 76
  • Is it possible to load that req.body.file directly to canvas.loadimage()? – cha Mar 13 '22 at 09:08
  • Please rephrase your question – Someone Special Mar 13 '22 at 12:24
  • Is it possible to send the image file instead of base64 one? I will use canvas.loadImage() , it only accepts HtmlImageElement, and not the base64 format – cha Mar 15 '22 at 14:03
  • 1
    You can convert blob to base64, of course you can also convert it back. https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – Someone Special Mar 15 '22 at 16:36
0

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");
sorousht
  • 1
  • 1