How to apply EXIF orientation

Question

I noticed that it's not every browser that apply the EXIF orientation.

Chrome on my mobile doesn't apply the EXIF orientation but Safari mobile does.

So since it's not standard, how can I apply the EXIF orientation without applying twice on Safari?

Also I was wondering if it's possible to apply the orientation on the client-side so I don't have to do it after on the server-side (not only an image rotation in javascript).

function handleFileSelect(evt) {

var previewContainer = evt.data.previewContrainer;

evt.stopPropagation();
evt.preventDefault();

var files;
if (evt.target.files) {
    files = evt.target.files // FileList object
}
else if (evt.originalEvent.dataTransfer.files) {
    files = evt.originalEvent.dataTransfer.files
}

//if there's a file
if (files) {

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        var orientation = 0;

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        //EXIF.getData(f, function () {
        //    orientation = EXIF.getTag(this, "Orientation");
        //    alert(orientation);
        //    alert(EXIF.pretty(this));
        //});

        createReader(f, previewContainer);

    }
}
}

Maybe [this question](http://stackoverflow.com/questions/10341685/html-javascript-acces-exif-data-before-file-upload) could be helpful. Edit: [this one](http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side) is good as well. — MTCoster, Jan 29 '15 at 14:21
I'm not sure that I understand the answer. I have already the EXIF orientation but how can I edit the picture to apply the orientation — Marc, Jan 29 '15 at 14:25
You can use the css `rotation` property and apply it conditionally with javascript — MTCoster, Jan 29 '15 at 14:26
I did that already, but since safari honors the EXIF orientation, it would be a double orientation. — Marc, Jan 29 '15 at 14:27

score 4 · Accepted Answer · edited May 23 '17 at 12:28

4

To be sure the image displays correctly regardless of browser and exif orientation, you need to have javascript that does the rotation and puts the image on a canvas. This protects it from "double-rotation" where the rotation is natively supported, e.g. safari.

I solved this problem using the JavaScript-Load-Image project from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

edited May 23 '17 at 12:28

Community

1
1

answered Feb 18 '15 at 23:57

flexponsive

6,060
8
26
41

Good idea! I managed to do it by hard coding it when a user is on safari witch is not nice... – Marc Feb 19 '15 at 00:00

How to apply EXIF orientation

1 Answers1

Linked