Download multiple PNGs with one request/response (

Question

I have one specific problem:

I have a single request, sent to an nodejs express application, which shall return multiple PNGs. The result is displayed directly in an image in the browser.

image.src = http://www.....

The PNGs are created server side, but I do not manage to send them back in one response and display them client side in the browser as images.

I piped the PNG content in a stream, which I sent back. I closed the stream at the end, when all files were sent back. I did not call res.end() in between.

What happens is that I receive a PNG File, really big (so I know it contains the data of all the images I requested), but my image in the browser only displays the first PNG - and I dont know how to split the response client side to view all my images.

I even can't view the PNGs if I download them directly on my pc (by calling the request manually) - the returning PNG is really big, but does only display the first PNG when I open it for example in gwenview.

It is no option to send the pngs in an zip file and extract it client side, because not all browser do support the unzipping. (I had a hard time learning this) I really dont know how to solve this problem. Do I need to set a specific header type I do not know yet? Do I need to send some delimiter inbetween the PNGs? How can I split the returning PNG client side?

Some help would be really appreciated!

Thank you!

Answer 1

An alternative option is use node-canvas to combine multiple images into one large one.

Answer 2

There's no MIME type for multiple images. Your best bet is to generate a single html page and then embed the images in it. If you don't want to keep any of the images on your server, you can embed them using a data URL: https://github.com/heldr/datauri