javascript - Writing binary data using node.js fs.writeFile to create an image file

Question

I'm trying to write a canvas data with node.js fs.writeFile as a binary. JPEG file, but after the file is written I can see that the file is stored as plain text, not binary data.

This is an example of the data sent from the client to my node, representing the JPEG image data (just a few first characters):

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA3PEY8MlBGQUZaVVBfeM...

I'm getting this data on the client side by performing:

canvas.toDataURL('image/jpeg', 0.5).replace('data:image/jpeg;base64,', '')

Here is the function usage in my node.js server:

fs.writeFile('../some.jpeg', data, 'binary', function(err){});

Instead of the file being written as binary (????? JFIF ...), it writes exactly the data it received from the client.

What am I doing wrong here?

Answer 1

JavaScript language had no mechanism for reading or manipulating streams of binary data. The Buffer class was introduced as part of the Node.js API to make it possible to interact with octet streams in the context of things like TCP streams and file system operations.

Pure JavaScript, while great with Unicode encoded strings, does not handle straight binary data very well.

When writing large amounts of data to a socket it's much more efficient to have that data in binary format vs having to convert from Unicode.

var fs = require('fs');
// string generated by canvas.toDataURL()
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"
    + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"
    + "3gAAAABJRU5ErkJggg==";
// strip off the data: url prefix to get just the base64-encoded bytes
var data = img.replace(/^data:image/w+;base64,/, "");
var buf = Buffer.from(data, 'base64');
fs.writeFile('image.png', buf, /* callback will go here */);

Reference