Download multiple PNGs with one request/response (nodejs) - node.js

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!

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

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

Related

how to get and display photo from ldap

I'm using ldap3.
I can connect and read all attributes without any issue, but I don't know how to display the photo of the attribute thumbnailPhoto.
If I print(conn.entries[0].thumbnailPhoto) I get a bunch of binary values like b'\xff\xd8\xff\xe0\x00\x10JFIF.....'.
I have to display it on a bottle web page. So I have to put this value in a jpeg or png file.
How can I do that?
The easiest way is to save the raw byte value in a file and open it with a picture editor. The photo is probably a jpeg, but it can be in any format.
Have a look at my answer at Display thumbnailPhoto from Active Directory in PHP. It's especially for PHP but the concept is the same for Python.
basically it's about either using the base64 encoded raw-data as data-stream or actually using a temporary file that is serverd (or used to determine the mime-type)

Easily differentiate video files from image files in Node

I'm building a project where people can upload files, I would like to then display those files in a browser where people can interact with them (vote, comment etc)
However, this means I need to programatically build the html depending on the format of the video or image. Is there a way to feed a file (or filename) into a library, and determine whether I need to display it in a video element or an image element? Even a list of video formats vs image formats would help but I haven't seen anything in regards to that.
No module can reliably determine the file type. The user could either change the extension or even the magic number of the file to obfuscate it. The only reliable way it to try to pass file to some image / video transcoder to let it decide or error out if the format is invalid. This way you know you are working with known formats since all files are transcoded to your specific extensions. That could be mp4 or png. I recommend using handbrake for videos and sharp for images. Leaving the NPM links down below:
https://www.npmjs.com/package/handbrake-js
https://www.npmjs.com/package/sharp

Rendering Blob Buffer to PDF in Express/Node Response

Very strange, i am pulling my blob data out of my SQL Server, then returning it to my Express server. I then want to send it as a pdf file out to my res.send(). However im getting a big jumbled up pdf. It has the correct amount of pages, however instead of rendering the PDF it is supposed to, i just have a bunch of random lines and squares on the PDF.
The strange part is doing this the exact same way on a simple Express server works 100%, however trying to implement this on my production app that was generated with Yeoman fullstack, i now get this undesiered result.
Whats the best way to render my array buffer to a PDF and display it to the res as a pdf file? Thanks
My current code (this is the working method in the basic Express Server)
res.setHeader('Content-type', 'application/pdf');
res.send(recordset[0].ordaAttachment);
recordset[0].ordaAttachment is just a PDF buffer in the format below. (This is just an example and not the real PDF)
{"type":"Buffer","data":[37,80,68,70,45,49,46,51,13,37,226,227,207,211,13,13,49,32,48,32,111,98]}

node.js read images from PDF

I need to use PDF in a way similar to ZIP/RAR. To hold many images (ancient tibetan buddist literature), ideally 60000. But splitting in 10-100 volumes is OK.
Anything can be used for packing, but for unpacking we need Node.js. Because same PDF file must be served on web. But some users will need to use whole PDF.
So the question is, what node module I can use to read any single arbitrary image from huge PDF? Example would really help.
Every image is a single page. (Or in otherwords every page is single image)
We have been using https://github.com/mirkokiefer/Node-Magick for this....
But the pngs we get out sometimes are fairly low quality..

Image manipulation in NodeJS with base64 image data

I have a nodejs server that receives images encoded in base64 through a websocket. I would like to do some image manipulation on those images and send them back. I searched a little bit on the net to find some library to help me doing this, but all I could find were libraries that take images stored somewhere in the server side, do the manipulation and save back the image. Apparently all of them take as input a string containing the filename of the image, so I guess under the hood they are fetching the image manually through a file stream.
My question is, is there a library that may help me working directly on base64 data (that is, passing the data as input to the functions) or should I save every time the image on the server, modify it and send it back? I would rather not go with the latter because I'm working on some high-performance application, and all this saving/loading looks a waste of cycles. Otherwise, do you see some other way I could achieve this (that is, getting the image file without saving and loading it back, for example)?
Thanks.
Work with Buffers.
var img = new Buffer(img_string, 'base64');
// Work with your images like other tutorials do.
This one can work with "readable streams": https://github.com/aheckmann/gm
See the second set of examples in the readme.

Resources