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

It says `image/jpg`. So try writing `.jpg` instead of `.png` — vibhor1997a, Dec 14 '17 at 05:20
Thanks @vibhor1997a> I have updated the question to `.jpg` . I get the same response for `.jpg` as well. — Dinesh Madanlal, Dec 14 '17 at 05:23
@DineshKumar youcan save the image to a db and get the url?or save the base64. — zabusa, Dec 14 '17 at 05:25
Thanks @zabusa. I am unable to open the image in the local. I think it doesn't make sense in storing a broken file in the db. — Dinesh Madanlal, Dec 14 '17 at 05:27
The correct MIME type for .jpg is `image/jpeg`, someone done goofed. — Phix, Dec 14 '17 at 05:47
Thanks @Phix. The Content-Type is `image/jpg` for the microsoft photo API. Please refer the URL for more info - "https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get" — Dinesh Madanlal, Dec 14 '17 at 05:52
Please add some relevant code from your request where you get the body, hide your api credentials. — vibhor1997a, Dec 14 '17 at 06:08
Thanks @vibhor1997a. I have implemented the `request` library to hit the API. I have updated the question for better understanding. — Dinesh Madanlal, Dec 14 '17 at 06:15

score 3 · Accepted Answer · answered Dec 14 '17 at 06:41

3

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

answered Dec 14 '17 at 06:41

vibhor1997a

2,336
2
17
37

Thanks @vibhor1997a. That makes sense. Cheers. – Dinesh Madanlal Dec 14 '17 at 06:46

score 1 · Answer 2 · answered Dec 26 '17 at 08:24

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.

score 0 · Answer 3 · answered Jun 07 '20 at 20:14

Request is deprecated. You can do this with axios;

// GET request for remote image in node.js
axios({
  method: 'get',
  url: 'http://example.com/file.jpg',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

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

3 Answers3

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