如何应用EXIF方向

How to apply EXIF orientation

本文关键字:EXIF 方向 应用 何应用      更新时间:2023-09-26

我注意到并不是每个浏览器都应用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 来执行旋转并将图像放在画布上。这可以保护它免受本机支持旋转的"双重旋转",例如 safari。

我使用github的JavaScript-Load-Image项目解决了这个问题,这使得它变得非常简单;在这里看到我的答案:JS客户端Exif方向:旋转和镜像JPEG图像