Reading EXIF data from an uploaded photo

[Scott McCollough]

I kind of scares me how little use this forum is getting any more... I hope there are still people out there that can help.

I'm once again looking for a way to correctly orient photos uploaded to my site. My biggest issue is that I need to be able to read the EXIF data so I can see what the orientation of the image should be, so that I can make sure it's the right direction, then shrink it down to a more reasonable size (phones are uploading image 4000 x 3000, when all I really need in 1024 x 768).

Many years ago, virtualwiki posted an initial stab at reading exif, http://www.miva.com/forums/forum/des...63-exif-reader , but it was left in a rather unfinished state. Also, it only seems to work on .jpg files.

So has there been any sort of breakthrough on this? I've thought about just building a single-purpose PHP app that I send the temp upload file to and it reads in the data and sends back the details I need, but I'd really love for it to stay within MivaScript.

Thanks

Scott Mc

[ILoveHostasaurus]

You can use the ImageMagick -orient flag to process an image in ImageMagick server-side with orientation set the way you want. There are probably much better means to process images in batch locally though; IrfanView32 for example.

[virtualkiwi]

I think I might have done a bit more with that old Mivascript, but would have to dig out the code.
Since I originally posted years ago, I think there have been some additions to Mivascript that make handling binary or hex data easier.
With HTML 5 It's actually possible to check file dimensions client side now. I've ended up as webmaster and developer for my local camera club, and was having issues with members submitting incorrectly sized images for competitions.
Here's the code I use. You'll need to adjust the dimensions for what you need.
It doesn't check EXIF data for orientation, but I wouldn't be surprised if there are javascript libraries out there that can.
The code depends on Jquery and Jqueryui.
It is just using alerts, but elsewhere I've changed this to use Jqueryui dialogs, as it's too easy for people to disable alerts in the browser.
Obviously client side checking isn't 100% reliable, as people can disable javascript, but it does mean that images get checked before you waste any bandwidth uploading them.

            <script type="text/javascript">
                var _URL = window.URL || window.webkitURL;
                $('#fileToUpload').change(function (e) {
                    var image, file;
                    if ((file = this.files[0])) {
                        image = new Image();
                        image.onload = function () {
                            var aspectRatio = this.width / this.height;
                            if (aspectRatio < 1.5) {
                                correctHeight = 1080;
                                correctWidth = Math.floor(1080 * aspectRatio);
                            } else {
                                correctWidth = 1620;
                                correctHeight = Math.floor(1620 / aspectRatio);
                            }
                            if (this.width > 1620 || this.height > 1080) {
                                alert('This image is too large.\n Maximum size allowed is 1620x1080.\n This image is ' + this.width + 'x' + this.height + '\nThe correct size is ' + correctWidth + 'x' + correctHeight);
                                $('#submit').hide();
                            } else {
                                $('#submit').show();
                            }
                            if (this.width < 1620 && this.height < 1080) {
                                //$('#dialog').dialog();
                                //$('#dialog').html('This image is smaller than ideal. Maximum size allowed is 1620x1080.\n This image is ' + this.width + 'x' + this.height + '\nThe ideal size would be ' + correctWidth + 'x' + correctHeight);
                                alert('This image is smaller than ideal. Maximum size allowed is 1620x1080.\n This image is ' + this.width + 'x' + this.height + '\nThe ideal size would be ' + correctWidth + 'x' + correctHeight);
                                if (this.width < 1024 && this.height < 768) {
                                    $('#submit').hide();
                                } else {
                                    $('#submit').show();
                                }
                            }
                        };
                        image.src = _URL.createObjectURL(file);
                    }
                });
            </script>