NodeJS: saving base64 encoded image to disk

Question

My Express application receives base64 encoded PNG from the browser (generated from canvas with toDataURL ()) and writes it to a file. But the file is not a valid image file, and the "file" utility simply identifies it as "data."

var body = req.rawBody, base64Data = body.replace(/^data:image\/png;base64,/,""), binaryData = new Buffer(base64Data, 'base64').toString('binary'); require("fs").writeFile("out.png", binaryData, "binary", function(err) { console.log(err); // writes out file without error, but it not a valid image }); 

Answer 1

I think you are converting the data a little more than you need. After creating the buffer with the proper encoding, you just need to write the buffer to the file.

 var base64Data = req.rawBody.replace(/^data:image\/png;base64,/, ""); require("fs").writeFile("out.png", base64Data, 'base64', function(err) { console.log(err); }); 

new Buffer (..., 'base64') converts the input string to a buffer, which is just an array of bytes, interpreting the input as a base64 encoded string. Then you can simply write this byte array to a file.

Update

As mentioned in the comments, req.rawBody no longer a thing. If you use express / connect , then you must use the bodyParser() and use req.body , and if you do it using the standard Node, you need to aggregate the incoming data Buffer event and do this image data analysis in the end callback .

Answer 2

this is my complete solution that will read any base64 image format and save it in the appropriate format in the database:

  // Save base64 image to disk try { // Decoding base-64 image // Source: http://stackoverflow.com/questions/20267939/nodejs-write-base64-image-file function decodeBase64Image(dataString) { var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/); var response = {}; if (matches.length !== 3) { return new Error('Invalid input string'); } response.type = matches[1]; response.data = new Buffer(matches[2], 'base64'); return response; } // Regular expression for image type: // This regular image extracts the "jpeg" from "image/jpeg" var imageTypeRegularExpression = /\/(.*?)$/; // Generate random string var crypto = require('crypto'); var seed = crypto.randomBytes(20); var uniqueSHA1String = crypto .createHash('sha1') .update(seed) .digest('hex'); var base64Data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAZABkAAD/4Q3zaHR0cDovL25zLmFkb2JlLmN...'; var imageBuffer = decodeBase64Image(base64Data); var userUploadedFeedMessagesLocation = '../img/upload/feed/'; var uniqueRandomImageName = 'image-' + uniqueSHA1String; // This variable is actually an array which has 5 values, // The [1] value is the real image extension var imageTypeDetected = imageBuffer .type .match(imageTypeRegularExpression); var userUploadedImagePath = userUploadedFeedMessagesLocation + uniqueRandomImageName + '.' + imageTypeDetected[1]; // Save decoded binary image to disk try { require('fs').writeFile(userUploadedImagePath, imageBuffer.data, function() { console.log('DEBUG - feed:message: Saved to disk image attached by user:', userUploadedImagePath); }); } catch(error) { console.log('ERROR:', error); } } catch(error) { console.log('ERROR:', error); } 

Answer 3

UPDATE

I found this interesting link how to solve your problem in PHP . I think you forgot to replace space with + , as shown in the link.

I took this circle from http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png as a sample, which looks like this:

Then I passed it to http://www.greywyvern.com/code/php/binary2base64 , which returned me:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC 

saved this line in base64 , which I read in my code.

 var fs = require('fs'), data = fs.readFileSync('base64', 'utf8'), base64Data, binaryData; base64Data = data.replace(/^data:image\/png;base64,/, ""); base64Data += base64Data.replace('+', ' '); binaryData = new Buffer(base64Data, 'base64').toString('binary'); fs.writeFile("out.png", binaryData, "binary", function (err) { console.log(err); // writes out file without error, but it not a valid image }); 

I get the circle back, but the funny thing is that the file size has changed :))

End

When you read the reverse image, I think you need to adjust the headers

Take for example imagepng on a PHP page:

 <?php $im = imagecreatefrompng("test.png"); header('Content-Type: image/png'); imagepng($im); imagedestroy($im); ?> 

I think the second line is header('Content-Type: image/png'); important, otherwise your image will not be displayed in the browser, but only a bunch of binary data is displayed in the browser.

In Express, you just simply use something like below. I am going to display your gravatar, which is located at http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG and is a jpeg file when you curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG . I only request headers because otherwise curl will display a bunch of binaries (Google Chrome immediately loads) to the console:

 curl --head "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG" HTTP/1.1 200 OK Server: nginx Date: Wed, 03 Aug 2011 12:11:25 GMT Content-Type: image/jpeg Connection: keep-alive Last-Modified: Mon, 04 Oct 2010 11:54:22 GMT Content-Disposition: inline; filename="cabf735ce7b8b4471ef46ea54f71832d.jpeg" Access-Control-Allow-Origin: * Content-Length: 1258 X-Varnish: 2356636561 2352219240 Via: 1.1 varnish Expires: Wed, 03 Aug 2011 12:16:25 GMT Cache-Control: max-age=300 Source-Age: 1482 

---

 $ mkdir -p ~/tmp/6922728 $ cd ~/tmp/6922728/ $ touch app.js 

app.js

 var app = require('express').createServer(); app.get('/', function (req, res) { res.contentType('image/jpeg'); res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG'); }); app.get('/binary', function (req, res) { res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG'); }); app.listen(3000); $ wget "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG" $ node app.js 

Answer 4

An easy way to convert a base64 image to a file and save as some random identifier or name.

 // to create some random id or name for your image name const imgname = new Date().getTime().toString(); // to declare some path to store your converted image const path = yourpath.png // image takes from body which you uploaded const imgdata = req.body.image; // to convert base64 format into random filename const base64Data = imgdata.replace(/^data:([A-Za-z-+/]+);base64,/, ''); fs.writeFile(path, base64Data, 'base64', (err) => { console.log(err); }); // assigning converted image into your database req.body.coverImage = imgname 

Answer 5

I also had to save Base64 encoded images that are part of the data urls, so I made a small npm module to do this if I (or anyone else) needed to do it again in the future. It was called ba64 .

Simply put, it takes the URL of Base64 encoded data and saves the image in your file system. It can save synchronously or asynchronously. It also has two helper functions: one to get the image file extension, and the other to split Base64 encoding into the data: scheme prefix.

Here is an example:

 var ba64 = require("ba64"), data_url = "data:image/jpeg;base64,[Base64 encoded image goes here]"; // Save the image synchronously. ba64.writeImageSync("myimage", data_url); // Saves myimage.jpeg. // Or save the image asynchronously. ba64.writeImage("myimage", data_url, function(err){ if (err) throw err; console.log("Image saved successfully"); // do stuff }); 

Install it: npm i ba64 -S . The repo is on GitHub: https://github.com/HarryStevens/ba64 .

PS Later it occurred to me that ba64 is probably a bad name for the module, as people can assume that it encodes and decodes Base64, which is not (there are many modules that already do this). Oh good.