I am building a small app with nodejs/expressjs. I made an upload wizard for GIF and JPG images... Depend on images' extension I will classify them into Animated Images or Normal Images...
GIF --> Animated Images
JPG --> Normal Images
But I got a problem, images in JPG can be animated. So how can I detect animated JPG images?
Demo animated JPG: http://picforest.net/pic/0237bbca82954e74902a4afba66df221
I think you can find out that information using EXIF information.
For instance, here's the EXIF info of the image that you have provided:
http://regex.info/exif.cgi?imgurl=http%3A%2F%2Fcdn.picforest.net%2Fupload%2F2015%2F17%2F0237bbca82954e74902a4afba66df221.jpg
It says that it's a GIF image.
There's a node module for exif called https://github.com/gomfunkel/node-exif. Perhaps that may help you out
As it was pointed in comments, there is no such thing as animated JPEGs (except this obscure proposal). Unfortunately this not mean that you can rely on image extension. Extension is just part of file name, it suggest file type, but not determines it. For example image you shared has .jpg extension, but in reality it's GIF and every major browser will treat it as one. In order to detect animated image you must inspect it's content. For example in case of GIF images you could check if first 6 bytes of file is GIF89a or GIF87a, but doing so you will know only that image is a GIF, not that image is an animated GIF. If you want to detect only animated GIFs you must check if they have multiple Image Descriptor Blocks, and it's a little bit more complicated.
It's also worth to mention that currently there are 3 supported by browsers image formats which could contain animation:
GIF - it's rather obvious;
APNG - it's supported by Firefox and Safari, other browsers displays these images as ordinary PNGs;
SVG - SMIL animations are supported by all major browsers except IE and Edge, and there are also CSS and ECMAScript animations.
If you want to detect first two types of animation you can use my node.js library - is-animated, it's rather simple to use:
const isAnimated = require('is-animated');
isAnimated(someBuffer); // -> true/false
Unfortunately currently it doesn't support detecting animated SVGs.
Related
Here is an SVG image I want to convert to PNG with librsvg in my program.
This is a PNG version of the SVG exported from Inkscape:
This is a bitmap of the same SVG exported with librsvg:
Only the white portions of the image are exported. The black portions, despite being well-defined in the background, appear transparent.
This problem occurs whether I use the librsvg API or the program rsvg-convert. You can use the W3 validator to see that the SVG's markup is valid.
I notice the same thing happens in the thumbnails of the SVGs in my file browser. Perhaps they're using librsvg?
Upon digging into the files I discovered that, for some reason, the fill of the black portion was set to "fill:currentColor". I don't know where that came from, but changing it to "fill:#000000" fixed the problem.
I have tried nearly every library to convert pdf to svg, Following are the results of them
gs or ghostscript and imagemagick: The size gets multiplied by 100
pdf2svg and inkscape: The image on the top of the pdf is not at all accurate here are the links to the pdf and the svg.
PDF: https://drive.google.com/open?id=0BxyQR1owWa_pcnhhSk5wQWJGMVk
SVG: https://drive.google.com/open?id=0BxyQR1owWa_pVnhoLVlob1U2d1k
Please suggest me if I am missing something that needs to be done.
The Ghostscript SVG output device is seriously deprecated and no longer supported (or indeed built into the standard Ghostscript binary).
In any event, you need to be aware that PDF is a very rich graphics model, and it is simply not possible to reproduce every possible nuance of a PDF using the SVG graphics model, in particular fonts are a problem, but so is almost any kind of transparency. When that occurs Ghostscript will render the PDF to an image, and insert that into an SVG file. Almost certainly that's why you are seeing the SVG file being considerably larger than the PDF file. You should be able to use the -r switch to control the resolution of the rendering, allowing you to trade off quality for size.
Even if the whole file isn't converted to a bitmap, its possible that large portions of it are, or that the bitmap compression in SVG is less good than for PDF (or GS isn't taking advantage of all the possibilities). FWIW the PDF file uncompressed runs to > 4MB.
I need to show tiff images in browser. Is there any way to show multi page tiff in browser?
Any addon or plugins that displays?
Any alternative that shows tiff without converting it to other formats ?
As Iza mentioned in the comment above, the functionality for loading a TIF image in a browser is a limitation of the browser support itself. It does appear that Safari is the only "mainstream" browser that supports displaying TIF images:
https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
The only options for achieving this functionality with all browsers would be to either convert your TIF images into a MIME type that all browsers support in a back end service or perform a batch convert operation on all your TIF images. There are a variety of libraries that you can use to maintain the quality and data of your tiff during conversion.
I want to make a responsive website. Part of that is to enhance my graphics. I have a few PNG flat icons that I would like to convert to SVG but I have no knowledge about Illustrator or any other SVG editor. I've tried an online service called vector magic, but the results are not what I need.
What is the best way to convert my images to SVG?
You should try Illustrator to vectorize your images (there is a function to do this). There will never be a perfect result, so you'll have to correct imperfections.
Here is a link that explains how to do this. You'll have then to save your image in "save as" and change the ai filename (for illustrator) to svg.
I've been playing with jssor sliders, specifically with different-size-photo-slider. It works when I run the demo version, but when I add my own jpegs, generated by Aperture on OS X from RAW format, those images never finish loading. The loading animated icon just stays forever. The files and pixel sizes are not different from the jssor images. It looks like my jpegs fail to be resized. I tried both Safari and Firefox. Any ideas?
Thanks.
It looks like when I export from Aperture with the default colormap, which is sRGB IEC611966-2.1, javascript has problems resizing the picture. Using, or maybe just changing to, Adobe 1998 or Generic RGB makes things work fine. BTW. the source is Nikon raw file with sRGB color map.