11

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

我们可以canvas很容易地旋转图像，但是我们如何确定所需的旋转呢？我们尝试了一些用于 JavaScript ( exif.js )的 EXIF 读取库，但无法成功读取方向。

4

4 回答 4

7

好的，看起来您实际上可以使用 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
于 2013-04-25T18:04:54.363 回答
3

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

只需使用

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

同样在这里你可以看到另一个例子。

于 2014-11-07T07:59:04.333 回答
1

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

EXIF.getData(file, function () {
    alert(this.exifdata.Orientation);
});
于 2016-04-04T01:07:21.107 回答
-1

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

相反，您可以做的是“加载”您的图像 src，创建一个画布，然后将您的画布绘制在您的图像之上，这样做的目的是摆脱任何与 iphone 相关的图像“exif”旋转，因为画布 drawImage 会擦除exif 数据。

绘制完成后，您将看到您的图像“旋转”回它在 PC 浏览器上的外观

于 2017-07-17T19:07:54.097 回答