javascript - How to apply EXIF orientation - Stack Overflow

admin管理员组

文章数量:1321439

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

Share Improve this question Follow asked Jan 29, 2015 at 14:18 MarcMarc 16.5k2020 gold badges7979 silver badges121121 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptHow to apply EXIF orientationStack Overflow