Image manipulation in NodeJS with base64 image data - node.js

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.

Related

.DDS to .PNG conversion in memory NodeJS

I've run into an issue where there are a collection of .dds(direct draw surface) files which I need to be able to display within an electron/react app. From what I know, a .dds file must be converted to a png/jpeg before being able to be rendered in an img tag. This must also be done completely in memory as I don't want to create additional files.
Here is what I've tried.
Preview-DDS: https://github.com/Jam3/preview-dds
DDS-Parser: https://github.com/Jam3/parse-dds
I noticed Preview-DDS has an option to convert .dds to .png yet I had no luck replicating it in memory. This isn't a subject im really knowledgable on so I'm hoping someone can get me pointed in the right direction!

Is there a way in node.js to alter an existing file's byte data?

For some reason, JPG images in my company are stored with the first two bytes changed (very crude encryption?).
I need to open them in node.js to resize and watermark them. I got as far as reading the image file into a ReadStream but that appears to be the wrong approach.
Any help would be greatly appreciated.

Download multiple PNGs with one request/response (nodejs)

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.

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..

How to use ImageMagick to test if received input is an image (for security purposes)?

Imagine an environment in which users can upload images to a website by either uploading it from their pc or referring to a remote url.
As part of some security checks I'd like to make sure that the referenced object is indeed an image.
In the case of a remote-url, I of course check the content-type, but this isn't bullet-proof.
I figured I could use ImageMagick to do the task. Perhaps executing the ImageMagick.identify() method and if no error is returned and returned type is either JPG|GIF|,etc. the content is an image. (In a quick check I noticed that TXT files are identified correctly as well, so I have to blacklist these)
Is there any better way in doing this?
You could probably simply load the image via ImageMagick's appropriate function for your language of choice. If the image isn't formatted properly (in terms of internal formatting, not its aesthetic properties, that is), I would expect ImageMagick to refuse to load it and report an error. In PHP, for example, readImage returns false if the image fails to load.
Alternatively, you could read the first few hundred bytes of the file and determine if the expected image file format headers are present; e.g., "GIF89" etc.
These checks may backfire, if your image is in a compressable format (PNG, GIF) and it is constructed in a way similar to a zip bomb https://en.wikipedia.org/wiki/Zip_bomb
Some examples at ftp://ftp.aerasec.de/pub/advisories/decompressionbombs/pictures/ (nothing special about that site, I just googled decompression bombs)
Another related issue is that formats like SVG are in fact XML and some image processing tools are prone to a variant of "billion laughs" attack https://en.wikipedia.org/wiki/Billion_laughs
You should not store the original file. The generally recommended approach is to always re-process the image and convert it to an entirely new file. There have been vulnerabilites exploited inside valid image files (see GIFAR), so checking for this would have been useless.
Never expose your visitors to an image file that you have not written out yourself and for which you did not choose the file name yourself.

Resources