How to convert the string type from an API response to an image file - ����\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001 -

Question

I have used https://graph.microsoft.com/beta/me/photo/$value API to get the profile picture of the outlook user. I get an image on running the above API in the rest-client. The content-type of the API is "image/jpg"

But, in Node.js, the response of the API is as follows:

����\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001\u0000\u0001\u0000\u0000��\u0000�\u0000\u0005\u0005\u0005\u0005\u0005\u0005\u0006\u0006\u0006\u0006\b\t\b\t\b\f\u000b\n\n\u000b\f\u0012\r\u000e\r\u000e\r\u0012\u001b\u0011\u0014\u0011\u0011\u0014\u0011\u001b\u0018\u001d\u0018\u0016\u0018\u001d\u0018+"\u001e\u001e"+2*(*2<66<LHLdd�\u

I used 'fs' to create an image file. The code is as follows:

const options = {  
    url: "https://graph.microsoft.com/beta/me/photo/$value",
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Authorization': `Bearer ${locals.access_token}`,
        'Content-type': 'image/jpg',
    }
};

request(options, (err, res, body) => {  
    if(err){
        reject(err);
    }
    console.log(res);
    const fs = require('fs');
    const data = new Buffer(body).toString("base64");
    // const data = new Buffer(body);
    fs.writeFileSync('profile.jpg', data, (err) => {
        if (err) {
            console.log("There was an error writing the image")
        }
        else {
            console.log("The file is written successfully");
        }
    });
});

The file is written successfully, but the .jpg image file generated is broken. I am unable to open the image. The output of the image file is as follows:

77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve

Answer 1

The reason for this is that by default, request will call .toString() on the response data. In case of binary data, like a RAW JPEG, this isn't what you want.

It's also explained in the request documentation (albeit vaguely):

(Note: if you expect binary data, you should set encoding: null.)

Which means that you can use this as well:

const options = {  
  encoding : null,
  url      : "https://graph.microsoft.com/beta/me/photo/$value",
  method   : 'GET',
  headers  : {
    'Accept'        : 'application/json',
    'Authorization' : `Bearer ${locals.access_token}`,
    'Content-type'  : 'image/jpg',
  }
};

However, streaming is probably still the better solution, because it won't require the entire response being read into memory first.

Answer 2

You can do this by streaming the response like this,

request(options,(err,res,body)=>{
  console.log('Done!');
}).pipe(fs.createWriteStream('./profile.jpg'));

https://www.npmjs.com/package/request#streaming

https://nodejs.org/api/fs.html#fs_class_fs_writestream