How to read remote image to a base64 data url

Question

actually there are many answers for this question. But my problem is, i want to generate pdf dynamically with 5 external(URL) images. Im using PDFmake node module. it supports only two ways local and base64 format. But i don't want to store images locally. so my requirement is one function which takes url as parameter and returns base64. so that i can store in global variable and create pdfs

thanks in advance

function urlToBase(URL){
return base64;
}

var img = urlToBase('https://unsplash.com/photos/MVx3Y17umaE');
var dd = {
            content: [
              {
                text: 'fjfajhal'
              },
              {
                image: img,
              }
            ]
          };

          var writeStream = fs.createWriteStream('myPdf.pdf');
        var pdfDoc = printer.createPdfKitDocument(dd);
        pdfDoc.pipe(writeStream);
        pdfDoc.end();

im using PDFmake module from npm

Does this answer your question? [how to load an image from url into buffer in nodejs](https://stackoverflow.com/questions/18264346/how-to-load-an-image-from-url-into-buffer-in-nodejs) — Boaz, Feb 01 '20 at 09:05
The underlying question seems to be _How to read a remote image to memory_. I believe the above would answer that. — Boaz, Feb 01 '20 at 09:06
im sorry i tried earlier but that doesnt solved my problem, please help me — rustiver, Feb 01 '20 at 09:17
Please include what you have tried in your question, so we can point you in the right direction. — Boaz, Feb 01 '20 at 09:18
Please refer to the linked question. Your code is not reading the remote image. In addition, the URL is not pointing to an image but rather to the page that contains the image. — Boaz, Feb 01 '20 at 09:27
i referred that. but my requirnment is different. i want about 10 images from internet so im asking for function — rustiver, Feb 01 '20 at 09:29
You can ask about your own code or about a specific issue. You can't ask _for_ code to be written at your request. — Boaz, Feb 01 '20 at 09:31
im extremely sorry if i hurt you. but for 2 weeks im like going mad on this stuff so please dont mistaken me — rustiver, Feb 01 '20 at 09:35
but the thing is in your referred ans it just buffers the image but i needed to convert image into base64 format — rustiver, Feb 01 '20 at 09:36

Boaz · Accepted Answer · 2020-04-27T17:14:31.097

3

The contents of the remote image can first be fetched with an HTTP request, for example using the ubiquitous request npm module. The image string contents can then be transformed to a buffer and finally converted to a base64 string. To complete the transformation, add the proper data-url prefix, for example, data:image/png,base64, to the beginning of the base64 string.

Here is a rough example for a PNG image:

const request = require('request-promise-native');

let jpgDataUrlPrefix = 'data:image/png;base64,';
let imageUrl         = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

request({
    url: imageUrl,
    method: 'GET',
    encoding: null // This is actually important, or the image string will be encoded to the default encoding
})
    .then(result => {
        let imageBuffer  = Buffer.from(result);
        let imageBase64  = imageBuffer.toString('base64');
        let imageDataUrl = jpgDataUrlPrefix+imageBase64;

        console.log(imageDataUrl);
    });

edited Apr 27 '20 at 17:14

answered Feb 01 '20 at 10:26

Boaz

19,892
8
62
70

You can continue processing it in the `then` block, save it to a file, a DB and so on. You can also just return it and use it outside the scope of the specific request, if that's what you mean. – Boaz Feb 01 '20 at 10:46
DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead. – pcormier Dec 19 '22 at 20:34
@pcormier The answer is using `Buffer.from` – Boaz Dec 20 '22 at 21:02

How to read remote image to a base64 data url

1 Answers1