最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to apply EXIF orientation - Stack Overflow

programmeradmin5浏览0评论

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

    }
}
}
Share Improve this question asked Jan 29, 2015 at 14:18 MarcMarc 16.5k20 gold badges79 silver badges121 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

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

发布评论

评论列表(0)

  1. 暂无评论