Node.js get image from web and encode with base64

Question

I'm trying to fetch an image from the web and encode it with base64.

What I have so far is this:

var request = require('request');
var BufferList = require('bufferlist').BufferList;

bl = new BufferList(),

request({uri:'http://tinypng.org/images/example-shrunk-8cadd4c7.png',responseBodyStream: bl}, function (error, response, body) 
{
    if (!error && response.statusCode == 200) 
    {
        var type = response.headers["content-type"];
        var prefix = "data:" + type + ";base64,";
        var base64 = new Buffer(bl.toString(), 'binary').toString('base64');
        var data = prefix + base64;
        console.log(data);
    }
});

This seems to be pretty close to the solution, but I can't quite get it to work. It recognizes the data type and gives out this output:

data:image/png;base64

However, the bufferlist 'bl' seems to be empty.

Just a completely wild guess but I think it could be possible that the request() may be using a header indicating an agent that may be blocked by certain sites to minimize scraping. — Brett Zamir
– Brett Zamir, Commented Jun 15, 2013 at 13:50
@BrettZamir Do you think so? Blocking a request with a 200 response seems very nasty... — Sebastian vom Meer
– Sebastian vom Meer, Commented Jun 15, 2013 at 14:38
And may I ask: What is require('request')? Cannot find it in the documentation. All I know for this is http/https. — Sebastian vom Meer
– Sebastian vom Meer, Commented Jun 15, 2013 at 14:39
@Sebastian, yes, it is just a wild guess... But it is one of those problems which has recurred for me, so just offering it as a throwaway... — Brett Zamir
– Brett Zamir, Commented Jun 15, 2013 at 14:44
@SebastianG, if you can't find something being required in the docs, then that means it's from...? :D — gustavohenke
– gustavohenke, Commented Jun 15, 2013 at 23:22

Rus · Accepted Answer · 2020-05-13 17:34:36Z

193

BufferList is obsolete, as its functionality is now in Node core. The only tricky part here is setting request not to use any encoding:

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

request.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        data = "data:" + response.headers["content-type"] + ";base64," + Buffer.from(body).toString('base64');
        console.log(data);
    }
});

edited May 13, 2020 at 17:34

Rus

4711 bronze badges

answered Jun 16, 2013 at 11:51

Dan Kohn

34.4k9 gold badges91 silver badges100 bronze badges

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

7 Comments

Dan Kohn Over a year ago

encoding: null tells request that you want a buffer, not a string. A string gives you unusably garbled data, as the whole point of base64 is to encode binary. I got the answer about encoding in my own StackOverflow question stackoverflow.com/questions/16619980/…, so I'm happy to pay it forward.

SouvikMaji Over a year ago

Solution: Run production from localhost

Dimas Crocco Over a year ago

May all Gods bless you... I knew it was an encoding problem, but I was struggling to find how to disable it on request library...

Nagendra Rao Over a year ago

@DanKohn new Buffer is now deprecated. nodejs.org/api/buffer.html

kibuikaCodes Over a year ago

request is also deprecated

|

Yehuda · Accepted Answer · 2018-10-04 13:31:06Z

64

If anyone encounter the same issue while using axios as the http client, the solution is to add the responseType property to the request options with the value of 'arraybuffer':

let image = await axios.get('http://aaa.bbb/image.png', {responseType: 'arraybuffer'});
let returnedB64 = Buffer.from(image.data).toString('base64');

Hope this helps

answered Oct 4, 2018 at 13:31

Yehuda

1,0398 silver badges11 bronze badges

2 Comments

Dhananjai Pai Over a year ago

Thank you so much! Helped me saved a bunch of time and frustration!

ShaneTheKing Over a year ago

I was having a lot of issues with this and axios, turns out the response type is what makes it. Thansk a lot!

Ankur Shah · Accepted Answer · 2024-01-17 17:51:27Z

45

DISCLAIMER: NO INSTALLATION REQUIRED

This works using built-in http module!

NOTE: I tried it in node version 6.x, also applicable to above versions.

var http = require('http');

http.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', (resp) => {
    resp.setEncoding('base64');
    body = "data:" + resp.headers["content-type"] + ";base64,";
    resp.on('data', (data) => { body += data});
    resp.on('end', () => {
        console.log(body);
        //return res.json({result: body, status: 'success'});
    });
}).on('error', (e) => {
    console.log(`Got error: ${e.message}`);
});

I hope it helps!

Also, check more about the http.get(...) here !

edited Jan 17, 2024 at 17:51

answered Nov 30, 2017 at 6:36

Ankur Shah

8311 gold badge12 silver badges27 bronze badges

2 Comments

l p Over a year ago

This works. I had to use both the http and https modules in my solution since most resources are https today. Unfortunately, you'll need to check manually which module to use. See stackoverflow.com/a/45215071/4978821.

Valfar Developer Over a year ago

Best answer for me!

Poyoman · Accepted Answer · 2023-03-28 16:04:42Z

27

Another way of using node fetch, which breaks down the steps per variable:

const fetch = require('node-fetch');

const imageUrl = "Your URL here";
const imageUrlData = await fetch(imageUrl);
const buffer = await imageUrlData.arrayBuffer();
const stringifiedBuffer = Buffer.from(buffer).toString('base64');
const contentType = imageUrlData.headers.get('content-type');
const imageBase64 = 
`data:${contentType};base64,${stringifiedBuffer}`;

edited Mar 28, 2023 at 16:04

Poyoman

2,0031 gold badge24 silver badges34 bronze badges

answered May 21, 2021 at 0:25

Nick Taras

7569 silver badges15 bronze badges

1 Comment

thesdev May 6 at 12:21

fetch is available natively in node since v18, so you don't need node-fetch anymore.

user993683 · Accepted Answer · 2018-09-23 15:03:24Z

16

If you know the image type, it's a one-liner with the node-fetch package. Might not suit everyone, but I already had node-fetch as a dependency, so in case others are in a similar boat:

await fetch(url).then(r => r.buffer()).then(buf => `data:image/${type};base64,`+buf.toString('base64'));

answered Sep 23, 2018 at 15:03

user993683

2 Comments

Janosh Over a year ago

Nice and concise!

Gus Over a year ago

Works well! .buffer has been deprecated. This is the new way:

const blob = await response.arrayBuffer(); return `data:${response.headers.get("content-type")};base64,${Buffer.from(blob).toString("base64")}`;

Vishwa · Accepted Answer · 2021-03-02 11:50:00Z

12

If you are using axios then you can follow below steps

var axios = require('axios');
const url ="put your url here";
const image = await axios.get(url, {responseType: 'arraybuffer'});
const raw = Buffer.from(image.data).toString('base64');
const base64Image = "data:" + image.headers["content-type"] + ";base64,"+raw;

you can check with decode base64.

answered Mar 2, 2021 at 11:50

Vishwa

2513 silver badges6 bronze badges

Comments

Ross J · Accepted Answer · 2013-07-09 05:55:33Z

9

You can use the base64-stream Node.js module, which is a streaming Base64 encoder / decoder. The benefit of this method is that you can convert the image without having to buffer the whole thing into memory, and without using the request module.

var http = require('http');
var base64encode = require('base64-stream').Encode;

http.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', function(res) {
    if (res.statusCode === 200)
        res.pipe(base64encode()).pipe(process.stdout);
});

answered Jul 9, 2013 at 5:55

Ross J

911 silver badge2 bronze badges

Comments

webmato · Accepted Answer · 2016-04-28 00:35:28Z

3

I use for load and encode image into base64 string node-base64-image npm module.

Download and encode an image:

var base64 = require('node-base64-image');

var options = {string: true};
base64.base64encoder('www.someurl.com/image.jpg', options, function (err, image) {
    if (err) {
        console.log(err);
    }
    console.log(image);
});

Encode a local image:

var base64 = require('node-base64-image');

var path = __dirname + '/../test.jpg',
options = {localFile: true, string: true};
base64.base64encoder(path, options, function (err, image) {  
    if (err) { console.log(err); }  
    console.log(image);  
});

answered Apr 28, 2016 at 0:35

webmato

2,1911 gold badge12 silver badges6 bronze badges

2 Comments

Semur Nabiev Over a year ago

base64.encode(<URL>, <OPTIONS>, <CALLBACK>) api reference: github.com/riyadhalnur/node-base64-image/blob/HEAD/docs/docs.md

Alok Rajasukumaran Over a year ago

ECONNREFUSED error when trying this npm package. can see same issue opened in GitHub but no resolutions given

Dmytro Soltusyuk · Accepted Answer · 2021-06-30 19:16:41Z

2

Oneliner:

Buffer.from(
    (
      await axios.get(image, {
      responseType: "arraybuffer",
    })
  ).data,
  "utf-8"
).toString("base64")

answered Jun 30, 2021 at 19:16

Dmytro Soltusyuk

4504 silver badges11 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-11-02 18:46:22Z

2

Old post but could help someone. On the basis of Dmytro response that help me.

const base64FromUrl = async (url: string) => {
  try {
    return Buffer.from((await axios.get(url, { responseType: "arraybuffer", })).data, "utf-8").toString("base64")
  } catch (error) {
    return ""
  }
}

I've just add error handling.

edited Nov 2, 2022 at 18:46

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Oct 30, 2022 at 19:50

samloba

335 bronze badges

Comments

abhishek Tomer · Accepted Answer · 2022-11-25 18:17:56Z

1

You can use image-to-base64 Node.js module

The benefit of using this module is that you convert your image hassle-free

const imageToBase64 = require('image-to-base64');

const imageLink = 'Your image link'
imageToBase64(imageLink);
.then((response) => {
    const base64Image = `data:image/png;base64,${response}`
    console.log(base64Image);
  })
  .catch((error) => {
    console.log(error);
  })

answered Nov 25, 2022 at 18:17

abhishek Tomer

894 bronze badges

Collectives™ on Stack Overflow

Node.js get image from web and encode with base64

11 Answers 11

7 Comments

2 Comments

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

7 Comments

2 Comments

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related