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?

@Rayon I changed it to fs.writeFile('../some.jpeg', data, 'base64', function(err){}); but still it writes it as the same string it received. — Koby Douek
– Koby Douek, Commented Apr 19, 2017 at 6:06
@Rayon var buf = new Buffer(data, 'base64'); fs.writeFile('image.png', buf); works ! Please post this as an answer so I can rep you. — Koby Douek
– Koby Douek, Commented Apr 19, 2017 at 6:10
I was just about to suggest you later option... Glad it helped... — Rayon
– Rayon, Commented Apr 19, 2017 at 6:11

Kunal Raut · Accepted Answer · 2021-07-08 19:37:20Z

89

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

edited Jul 8, 2021 at 19:37

Kunal Raut

2,6042 gold badges14 silver badges25 bronze badges

answered Apr 19, 2017 at 6:27

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Koby Douek Over a year ago

Rayon, This works perfectly. Thanks for all your help, peace and love from Israel.

Rayon Over a year ago

– I'm glad it helped! Happy Coding

Mörre Over a year ago

"Pure javascript... does not handle straight binary data very well." -- I don't understand this answer, given that this is a recent Q&A. Did you completely miss TypedArrays and ArrayBuffer? Binary data is not an issue in Javascript, and while it it's "newish" it's not exactly that new. .developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

Ricardo G Saraiva Over a year ago

Work like a charm! Thx

Salamit Over a year ago

You sir, are a time saver! ^_^

|

Yakup Ad · Accepted Answer · 2018-07-28 19:51:24Z

14

I have had the question in question. I solved the problem when I made the default value null of "encoding" in the "request" library

var request = require("request").defaults({ encoding: null });
var fs = require("fs");

fs.writeFile("./image.png", body, function(err) {
    if (err) throw err;
});

answered Jul 28, 2018 at 19:51

Yakup Ad

1,65118 silver badges13 bronze badges

1 Comment

Rehmat Over a year ago

I was downloading an image file using a link and require("request").defaults({ encoding: null }); solved my day. But, the answer can be improved a bit more.

Gaurav Mogha · Accepted Answer · 2020-08-27 18:20:06Z

Use Buffer.from, as Buffer is deprecated, will get the following warning

(node:15707) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

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);

Piush Singh · Accepted Answer · 2019-07-22 05:03:37Z

Instead of writing the file directly to your client, first, ask the server to send images in binary format.

   let request= {
        headers: {
            'Content-Type': 'image/jpeg',
            'Authorization': "your token"
        },
        encoding:'binary'
    };
     request.get(url,request,(error, response, body)=>{
        if(error){
            console.log('error in get photo',error)
            return "default image to server";  
        }else{
            if(response.statusCode == 200){ 

      Fs.writeFile('path',body,'binary',function(err){
                    if(err){
                        return "your message";   
                    }else{
                        return "success";
                    }
                })
            }else{
                console.log('error in get photo 3')
                return "your message";  
            }
        }
    })

Collectives™ on Stack Overflow

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

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related