如何应用EXIF方向信息。

Question

我注意到并非所有浏览器都应用了 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);

    }
}
}

- Marc

---

也许这个问题会有帮助。编辑：这个问题也很好。 - MTCoster

我不确定我理解了答案。我已经有了EXIF方向，但是如何编辑图片以应用方向呢？ - Marc

你可以使用CSS的rotation属性，并通过JavaScript有条件地应用它。 - MTCoster

我已经做过了，但由于Safari遵守EXIF方向，这将导致双重方向。 - Marc

Answer 1

为确保图像在任何浏览器和exif方向下正确显示，您需要有一个执行旋转并将图像放置在画布上的javascript。这可以防止“双重旋转”，其中旋转是本地支持的，例如safari。

我使用来自github的JavaScript-Load-Image项目解决了这个问题，这使得它非常容易; 在这里查看我的答案：JS客户端Exif方向：旋转和镜像JPEG图像。

- flexponsive

---

好主意！我设法通过硬编码来实现它，当用户在Safari上时，这并不好... - Marc