how to load an image from url into buffer in nodejs

Question

I am new to nodejs and am trying to set up a server where i get the exif information from an image. My images are on S3 so I want to be able to just pass in the s3 url as a parameter and grab the image from it.

I am u using the ExifImage project below to get the exif info and according to their documentation:

"Instead of providing a filename of an image in your filesystem you can also pass a Buffer to ExifImage."

How can I load an image to the buffer in node from a url so I can pass it to the ExifImage function

ExifImage Project: https://github.com/gomfunkel/node-exif

Thanks for your help!

atulmy · Accepted Answer · 2020-04-13 09:34:55Z

66

Use the axios:

const response = await axios.get(url,  { responseType: 'arraybuffer' })
const buffer = Buffer.from(response.data, "utf-8")

edited Apr 13, 2020 at 9:34

atulmy

1,38315 silver badges24 bronze badges

answered Mar 3, 2020 at 11:34

Depp Wang

1,1399 silver badges9 bronze badges

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

5 Comments

Mohammed Mortaga Over a year ago

This should be the accepted answer in 2021

kenset Over a year ago

And also in 2022.

Carter Over a year ago

why "utf-8"? that is a binary content

andre Over a year ago

bless your soul

huy19th Over a year ago

Thank you. I need to load image from url into buffer to check it's metadata with image-meta and this works really well.

Koen. · Accepted Answer · 2018-10-08 08:24:47Z

64

Try setting up request like this:

var request = require('request').defaults({ encoding: null });
request.get(s3Url, function (err, res, body) {
      //process exif here
});

Setting encoding to null will cause request to output a buffer instead of a string.

edited Oct 8, 2018 at 8:24

Koen.

27.3k7 gold badges87 silver badges80 bronze badges

answered Aug 16, 2013 at 2:55

Dan Kohn

34.4k9 gold badges91 silver badges100 bronze badges

5 Comments

CodeMonkeyB Over a year ago

thanks that worked! Do I need to be concerned about loading too many images this way, or are they automatically deleted?

Dan Kohn Over a year ago

The V8 Javascript engine will garbage collect unused memory, so you should be fine.

TamusJRoyce Over a year ago

You mention it will "output" a buffer. Could you describe where the output is? request does not return a value.

Dan Kohn Over a year ago

@TamusJRoyce Here's a more complete example: stackoverflow.com/a/17133012/1935918

kub1x Over a year ago

Request is deprecated, there are others: github.com/request/request/issues/3142

Marius · Accepted Answer · 2022-02-15 23:17:29Z

38

import fetch from "node-fetch";

let fimg = await fetch(image.src)
let fimgb = Buffer.from(await fimg.arrayBuffer())

edited Feb 15, 2022 at 23:17

Marius

1,7893 gold badges23 silver badges33 bronze badges

answered Jan 28, 2021 at 21:01

cdroma

3813 silver badges3 bronze badges

1 Comment

Luckylooke Over a year ago

worked for me, even with native node fetch nodejs.org/dist/latest-v20.x/docs/api/globals.html#fetch, but still marked as experimental 👍

Yehonatan · Accepted Answer · 2018-06-28 08:58:47Z

21

I was able to solve this only after reading that encoding: null is required and providing it as an parameter to request.

This will download the image from url and produce a buffer with the image data.

Using the request library -

const request = require('request');

let url = 'http://website.com/image.png';
request({ url, encoding: null }, (err, resp, buffer) => {
     // Use the buffer
     // buffer contains the image data
     // typeof buffer === 'object'
});

Note: omitting the encoding: null will result in an unusable string and not in a buffer. Buffer.from won't work correctly too.

This was tested with Node 8

edited Jun 28, 2018 at 8:58

answered Jun 28, 2018 at 8:47

Yehonatan

3,2357 gold badges34 silver badges39 bronze badges

2 Comments

pbhd Over a year ago

uri is missing: request({ uri: url, encoding: null }, (err, resp, buffer) => {

kub1x Over a year ago

Request is deprecated: github.com/request/request/issues/3142

V Maharajh · Accepted Answer · 2022-03-23 05:18:38Z

Here's a solution that uses the native https library.

import { get } from "https";

function urlToBuffer(url: string): Promise<Buffer> {
  return new Promise((resolve, reject) => {
    const data: Uint8Array[] = [];
    get(url, (res) => {
      res
        .on("data", (chunk: Uint8Array) => {
          data.push(chunk);
        })
        .on("end", () => {
          resolve(Buffer.concat(data));
        })
        .on("error", (err) => {
          reject(err);
        });
    });
  });
}

const imageUrl = "https://i.imgur.com/8k7e1Hm.png";
const imageBuffer = await urlToBuffer(imageUrl);

Feel free to delete the types if you're looking for javascript.

I prefer this approach because it doesn't rely on 3rd party libraries or the deprecated request library.

Timothy Strimple · Accepted Answer · 2013-08-16 04:52:07Z

9

Use the request library.

request('<s3imageurl>', function(err, response, buffer) {
    // Do something
});

Also, node-image-headers might be of interest to you. It sounds like it takes a stream, so it might not even have to download the full image from S3 in order to process the headers.

Updated with correct callback signature.

edited Aug 16, 2013 at 4:52

answered Aug 16, 2013 at 2:33

Timothy Strimple

23.1k6 gold badges73 silver badges76 bronze badges

2 Comments

CodeMonkeyB Over a year ago

i tried using the request method, but the buffer is always null. If i put in the imageurl directly in the browser it loads fine. Any idea why that may be the case?

Timothy Strimple Over a year ago

Sorry, I had the wrong signature for the callback. I've updated the answer.

Piotr Tomasik · Accepted Answer · 2021-09-17 05:44:20Z

5

you can do it that way

import axios from "axios";

function getFileContentById(
  download_url: string
): Promise < Buffer > {
  const response = await axios.get(download_url, {
    responseType: "arraybuffer",
  });
  return Buffer.from(response.data, "base64");
}

edited Sep 17, 2021 at 5:44

Piotr Tomasik

9,2045 gold badges47 silver badges58 bronze badges

answered Aug 15, 2021 at 22:18

Mina Fawzy

21.6k18 gold badges143 silver badges168 bronze badges

Comments

Edwin Liu · Accepted Answer · 2020-09-19 04:26:23Z

4

request is deprecated and should be avoided if possible.

Good alternatives include got (only for node.js) and axios (which also support browsers).

Example of got:

npm install got

Using the async/await syntax:

const got = require('got');

const url = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';

(async () => {
    try {
        const response = await got(url, { responseType: 'buffer' });
        const buffer = response.body;
    } catch (error) {
        console.log(error.body);
    }
})();

edited Sep 19, 2020 at 4:26

answered Sep 19, 2020 at 4:21

Edwin Liu

8,0933 gold badges31 silver badges30 bronze badges

Comments

Kanishka Sahu · Accepted Answer · 2023-03-05 10:22:43Z

1

Simplest 2 line code to do this

In node.js there is inbuilt module called node-fetch. You can use that to download image from url and use as a buffer then you can save that buffer in any file system like s3-bucket azure etc.

import fetch from "node-fetch"

const image_url = "https://my-image-url.com";
const res = await fetch(image_url);
const resBuffer = await res.buffer();

answered Mar 5, 2023 at 10:22

Kanishka Sahu

3175 silver badges5 bronze badges

Collectives™ on Stack Overflow

how to load an image from url into buffer in nodejs

9 Answers 9

5 Comments

5 Comments

1 Comment

2 Comments

Comments

2 Comments

Comments

Comments

Simplest 2 line code to do this

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

5 Comments

1 Comment

2 Comments

Comments

2 Comments

Comments

Comments

Simplest 2 line code to do this

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related