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);

    }
}
}

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);

    }
}
}

• javascript
• jquery
• html
• exif

• Maybe this question could be helpful. Edit: this one is good as well. – MTCoster Commented Jan 29, 2015 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 Commented Jan 29, 2015 at 14:25
• You can use the css rotation property and apply it conditionally with javascript – MTCoster Commented Jan 29, 2015 at 14:26
• I did that already, but since safari honors the EXIF orientation, it would be a double orientation. – Marc Commented Jan 29, 2015 at 14:27

1 Answer 1

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