forms and images

[Ms.Longstocking]

I have a simple file upload control that is designed to upload a single image and am trying to implement some image orientation functionality for images that are taken by mobile devices.

My back end is handling the actual uploading just fine. However, prior to upload, I am displaying the new image after it's selected using the file upload control. If there is an orientation issue, the image is displayed rotated 90, 180, or 270 degrees clockwise.

I found a light javascript solution that I find quite savvy.

Here: http://stackoverflow.com/questions/2...rotation-issue

I like the idea of using CSS to fix the display.

Here's my SNAFU: I can get it to work the first time an image is selected, but if I try to re-select another image, the code uses the orientation from the first selection. Moreover, the function fires one additional time for every time I select a new image. I'm obviously missing something with respect to how I'm binding the function and am probably re-binding it every time an image is selected.

My code:

function fixExifOrientation(img) {
	img.on('load', function () {
		EXIF.getData(img[0], function () {
			console.log('Exif=', EXIF.getTag(this, "Orientation"));
			switch (parseInt(EXIF.getTag(this, "Orientation"))) {
				case 2:
					img.addClass('flip'); break;
				case 3:
					img.addClass('rotate-180'); break;
				case 4:
					img.addClass('flip-and-rotate-180'); break;
				case 5:
					img.addClass('flip-and-rotate-270'); break;
				case 6:
					img.addClass('rotate-90'); break;
				case 7:
					img.addClass('flip-and-rotate-90'); break;
				case 8:
					img.addClass('rotate-270'); break;

			}
		});
	});
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#newPic').attr('src', e.target.result);
        }           
        reader.readAsDataURL(input.files[0]);       
    }

    fixExifOrientation($('#newPic'));
}

What am I doing incorrectly here?

MzPippz

[tr333]

Any chance you could create an example using jsfiddle or codepen?

[Ms.Longstocking]

I'm not that jsfiddle-savvy.
I tried recreating the functionality there but am having problems getting the js to work at all. I can't even get an "alert" to fire.

[Ms.Longstocking]

If this helps....

https://jsfiddle.net/MsLongstocking/ktt0wLqu/

Instead of adding a link to the library, I pasted it into code window.
jsfiddle was telling me of a potential error....
Anyway, the link to the library can be found in my initial post if you'd like to do it by the book

My script starts at line 808 [function fixExifOrientation(img) {]

... and to be clear, this function is geared to displaying the image prior to any uploading taking place.

[Ms.Longstocking]

UPDATE --

I tried clearing the form (multipart/form-data) when the dialog box is recalled, thinking that because it's a multipart form that the images were being queued up.

Did not work.

<form method="post" id="picForm" enctype="multipart/form-data">

...

$("#picForm")[0].reset();

[tr333]

http://codepen.io/anon/pen/oLwOJk?editors=1111

A few things to note:

When adding resources to a fiddle/pen from github, you need to use https://rawgit.com/ so they are loaded with the correct content type. The standard github raw url is not a CDN and will return the content with an incorrect mime type.

I looked at the examples from exif-js github at https://github.com/exif-js/exif-js/b...ple/index.html for this. You'd want to use the exif.js file from that repository.

Test images can be found at https://github.com/recurser/exif-orientation-examples.

[tr333]

For some unknown reason, I couldn't get jQuery to load properly in jsfiddle, hence why I switched it to codepen

[Ms.Longstocking]

Excellent.
First hurdle is done.

Now, I can't for the life of me figure out why the image rotation is failing!

Select an image (taken from a mobile device) whose orientation is askew.
The code does its job marvelously.

--BUT--

Without refreshing/resetting the page, select an image whose orientation does not need manipulation.
The same orientation fix (or non-fix) from the initial image is being applied for each new image regardless of its EXIF properties.

I'm really at a loss. Been looking at this for days now.