NodeJS write base64 image-file

node.js

node.js Problem Overview


My NodeJS-Server receives a picture base64 encoded.

data:image/jpeg;base64,/9j/4QCcRXhpZgAASUkqAAgAAAA ... CiiigD//Z

The received data should be saved as jpg. Therefore I use a Buffer and the FileSystemWriter:

var imageBuffer = new Buffer(data, 'base64'); //console = <Buffer 75 ab 5a 8a ...
fs.writeFile("test.jpg", imageBuffer, function(err) { //... });

the fs.writeFile doesn't throw an error. A jpeg-file is saved, but I can't open it. Image-Viewer says:

File is damaged or too big.

The original file is 6kb large and the new file 7kb.

node.js Solutions


Solution 1 - node.js

You have to strip the url meta information from it, the data:image/jpeg part. (Reiterating what @CBroe said) Here is a small function to return the correct information from the input string.

var data = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';

function decodeBase64Image(dataString) {
  var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
    response = {};

  if (matches.length !== 3) {
    return new Error('Invalid input string');
  }

  response.type = matches[1];
  response.data = new Buffer(matches[2], 'base64');

  return response;
}

var imageBuffer = decodeBase64Image(data);
console.log(imageBuffer);
// { type: 'image/jpeg',
//   data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 b4 00 00 00 2b 08 06 00 00 00 d1 fd a2 a4 00 00 00 04 67 41 4d 41 00 00 af c8 37 05 8a e9 00 00 ...> }

Then you can save the buffer using your above method.

fs.writeFile('test.jpg', imageBuffer.data, function(err) { ... });

Solution 2 - node.js

Another way is to use fs.writeFile with encoding option base64 after stripping out the meta information.

var image = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';

var data = image.replace(/^data:image\/\w+;base64,/, '');

fs.writeFile(fileName, data, {encoding: 'base64'}, function(err){
  //Finished
});

Solution 3 - node.js

try this simple way

 var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..kJggg==';
var base64Data = imgData.replace(/^data:image\/png;base64,/, "");


require("fs").writeFile("out.png", base64Data, 'base64', 
function(err, data) {
if (err) {
    console.log('err', err);
}
console.log('success');

});

focuse at here 1) data:image/png;base there is png 2) replace(/^data:image\/png; here too png and name must save with 3) writeFile("out.png png

Solution 4 - node.js

Here you can use this way little changes I did

    var imgData = req.body.image;// coming from client request
  var base64Data = imgData.split(",")[1];// split with `,`

   require("fs").writeFile(Date.now()+"filename.jpeg", base64Data, 'base64', 
    function(err, data) {
       if (err) {
      console.log('err', err);
         }
        console.log(data,"data");

and finally your file will be looks like 1572341624757filename.jpeg

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmarcelView Question on Stackoverflow
Solution 1 - node.jsJulian LanniganView Answer on Stackoverflow
Solution 2 - node.jsrolnnView Answer on Stackoverflow
Solution 3 - node.jskumbhani bhaveshView Answer on Stackoverflow
Solution 4 - node.jsK.SView Answer on Stackoverflow