Nodejs serve base64 as Image

Question

I am trying to serve a base64 string as an image with image/png headers. The headers are being set properly but the images are not being shown all I can see is a blank screen. here is the code:

request('someCustomLink', function (error, response, body) {
// someCustomLink gives the base64 string
        var img = new Buffer(body, 'base64');
        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': img.length
        });
        res.end(img);         
});

this is the link that I followed to arrive at this solution.

Any help will be appreciated.

EDIT Here are the response headers from my someCustomLink (it might help in understanding the problem betr)

Accept-Ranges:bytes
Content-Length:128778
Content-Type:image-jpeg
Date:Thu, 21 Dec 2017 06:03:52 GMT
ETag:"edc04d469779108860478b361b7427d7"
Last-Modified:Mon, 11 Dec 2017 08:54:32 GMT
Server:AmazonS3
x-amz-id-2:QlR39g0vC5CeOo6fdKzX9uFB+uiOtj61c0LKW2rQLcCPWllcKyfbpg93Yido+vZfzMzB3lmhbNQ=
x-amz-request-id:3EC77634D9A05371

This is the get req

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

app.get('/thumb/:thumbLink', function(req, res) {


        request('https://s3.amazonaws.com/my-trybucket/projectImages/'+req.params.thumbLink, function (error, response, body) {
            //console.log('error:', error); // Print the error if one occurred
            //console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
            //console.log('body:', body); // Print the HTML for the Google homepage.
            var img = new Buffer(body, 'base64');
            res.writeHead(200, {
                'Content-Type': 'image/png'

            });
            res.end(img);
        });
    });

-Thanks

Here is the link that I am using s3.amazonaws.com/my-trybucket/projectImages/… — sidd
– sidd, Commented Dec 21, 2017 at 6:07

Vipin Kumar · Accepted Answer · 2017-12-21 06:54:34Z

9

The response that you are getting contains data:image/png;base64,. You have remove this before creating the Buffer. See example below

request('https://s3.amazonaws.com/my-trybucket/projectImages/e31492f7314837a22a64395eee7cedfd', function(error, response, body) {
    var img = new Buffer(body.split(',')[1], 'base64');
    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': img.length 
    });
    res.end(img);
})

edited Dec 21, 2017 at 6:54

answered Dec 21, 2017 at 5:46

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

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

5 Comments

sidd Over a year ago

But this Google logo is not base64. I have the customLink serving base64 strings that I need to convert to images. Also tried initializing the request as you told the results are the same all I am seeing is a blank image

Vipin Kumar Over a year ago

Could you post a functional example?

sidd Over a year ago

added the functioning get req. you can replicate it on your system. find the link in the comment above

Vipin Kumar Over a year ago

updated the answer. Also remove .defaults({ encoding: null }); as suggested earlier.

Anindya Dhruba Over a year ago

Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

Rotimi · Accepted Answer · 2021-10-25 21:37:30Z

Was stuck for long on this particular issue too only to find out that sending the actual data Body that comes back from s3 is actually sufficient to display the image. Here's my implementation (in typescript):

// a method in my Bucket class

async getObject(key: string) {
    const params = {
      Bucket: this.bucket, //my bucket name set in my constructor
      Key: key,
    };
    return new Promise((resolve, reject) => {
      s3.getObject(params, (err, data) => {
        if (err) reject(err);
        if(data) resolve(data.Body);
      });
    });
  }

// the get request route

app.get(
  "url/:folder/:id",
  async (req: Request, res: Response) => {
    const { folder, id } = req.params;
    const image = (await new Bucket().getObject(`${folder}/${id}`)) as Buffer;
    res.send(image);
  }
);

Florian Weller · Accepted Answer · 2022-05-30 15:27:41Z

0

I got the error ECONNRESET on my server. It turned out that res.end() was responsible for it. I replaced it with res.send() and the transfer went without problems. Here is my generic solution for serving base64 files

async (req: Request, res: Response) => {
  const { id } = req.params;

  //Get the image or file with your own method
  const base64File = await GetBase64File(id)

  const [fileInfo, fileData] = base64File.split(",");
  const contentType = fileInfo.split(";")[0].replace("data:", "");

  res.setHeader("Content-Type", contentType);
  res.setHeader("Content-Length", fileData.length);

  const buffer = Buffer.from(fileData, "base64");
  res.send(buffer);
};

answered May 30, 2022 at 15:27

Florian Weller

1

Collectives™ on Stack Overflow

Nodejs serve base64 as Image

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related