31

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?

gotnull
  • 26,454
  • 22
  • 137
  • 203
Koby Douek
  • 16,156
  • 19
  • 74
  • 103

4 Answers4

82

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

Kunal Raut
  • 2,495
  • 2
  • 9
  • 25
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • 5
    Rayon, This works perfectly. Thanks for all your help, peace and love from Israel. – Koby Douek Apr 19 '17 at 06:32
  • 1
    – I'm glad it helped! _Happy Coding_ – Rayon Apr 19 '17 at 06:33
  • 2
    *"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. .https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays – Mörre Aug 28 '17 at 21:45
  • @Mörre - I referred that statement from [__here__](https://docs.nodejitsu.com/articles/advanced/buffers/how-to-use-buffers/) – Rayon Aug 29 '17 at 05:17
  • @Rayon Which is from 2011. I refer to my comment above. – Mörre Aug 29 '17 at 09:26
  • 1
    Work like a charm! Thx – Ricardo G Saraiva May 09 '18 at 01:43
  • 1
    You sir, are a time saver! ^_^ – Salamit Apr 30 '19 at 05:13
  • thanks for this, but according to this answer, `fs.write` requires a callback function: https://stackoverflow.com/a/51155728/144088. how come this works for you? – Crashalot Apr 25 '21 at 07:55
  • @Crashalot - I seriously did not pay attention to that callback argument. I have updated my answer. Thanks for pointing that out. – Rayon Apr 28 '21 at 10:07
13

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;
});
Yakup Ad
  • 1,591
  • 16
  • 13
  • 1
    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. – Rehmat Mar 17 '19 at 04:47
3

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);
Gaurav Mogha
  • 370
  • 3
  • 9
2

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";  
            }
        }
    })
Piush Singh
  • 41
  • 3