javascript - 在 JavaScript 中确定照片的方向？

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