如何应用 EXIF 定位

我注意到并不是每个浏览器都应用 EXIF 方向。

我的手机上的 Chrome 不应用 EXIF 方向，但 Safari 手机则应用。

那么既然它不是标准的，那么如何在 Safari 上应用 EXIF 方向而不应用两次呢？

另外我想知道是否可以在客户端应用方向，这样我就不必在服务器端执行此操作（不仅仅是 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);

    }
}
}

为了确保无论浏览器和 exif 方向如何，图像都能正确显示，您需要使用 javascript 来执行旋转并将图像放在画布上。这可以保护它免受“双旋转”的影响，其中旋转是本机支持的，例如苹果浏览器。

我使用以下方法解决了这个问题JavaScript 加载图像 https://github.com/blueimp/JavaScript-Load-Image来自github的项目，这使得它变得非常容易；在这里查看我的答案：JS 客户端 Exif 方向：旋转和镜像 JPEG 图像 https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images/20600801#20600801