Question

我们正在使用FileReader从iPhone上拍摄的照片中获取图像到浏览器中。然后，我们使用drawImage()将该图片绘制到canvas上。问题是在iPhone显示屏上拍摄的照片在页面上旋转。我们无法在任何Android设备上重现此内容。

我们可以轻松地在canvas上旋转图像，但我们如何确定所需的旋转？我们尝试了一些用于JavaScript的EXIF读取库（exif.js）但无法成功读取方向。

Answer 1

好的，所以看起来你实际上可以使用exif.js读取exif数据。

$("input").change(function() {
    var file = this.files[0];
    fr   = new FileReader;

    fr.onloadend = function() {
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
        alert(exif.Orientation);
    };

    fr.readAsBinaryString(file);
});

此代码正在使用exif.js和binaryajax.js。

如果您尝试使用ios拍摄的照片，这只能。我认为android只是旋转实际图像，方向总是1，所以他们甚至没有写出exif的方向。因此，我们被愚弄认为它不起作用。

对于具有方向的图像，该值是可读的，可以解释如下（那些是F的顺便说一句）：

  1        2       3      4         5            6           7          8

888888  888888      88  88      8888888888  88                  88  8888888888
88          88      88  88      88  88      88  88          88  88      88  88
8888      8888    8888  8888    88          8888888888  8888888888          88
88          88      88  88
88          88  888888  888888

Answer 2

即使没有binaryajax.js也能很好地工作

只需使用

EXIF.getData(changeEvent.target.files[0], function () {
    alert(EXIF.pretty(this));                            
});

另外here你可以看到另一个例子。

Answer 3

或者，如果您只想要Orientation标签：

EXIF.getData(file, function () {
    alert(this.exifdata.Orientation);
});

Answer 4

我的两分钱是exif-js框架对我不起作用而且不是必需的。

而你可以做的是你的图像src的'onload'，创建一个画布，然后在你的图像上方绘制你的画布，这实现了摆脱任何iphone相关的'exif'旋转图像，因为canvas drawImage删除exif数据。

绘制完成后，您会看到图像“旋转”回到PC浏览器上的显示效果

在JavaScript中确定照片的方向？

4 个答案: