问题描述

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

We're using FileReader to get an image, from a photo taken on an iPhone, into the browser. We then use drawImage() to draw that image onto a canvas. The problem is that photos taken on an iPhone display rotated on the page. We can't reproduce this on any Android devices.

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

We can rotate the image on the canvas easily enough but how can we determine the required rotation? We tried some EXIF-reading libraries for JavaScript (exif.js) but were unable to successfully read the orientation.

推荐答案

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

Ok, so it looks like you in fact can read the exif data using exif.js.

$("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的方向.因此，我们被愚弄以为它不起作用.

This works but only if you try it out with a photo taken on ios. I think android just rotates the actual image and orientation is always 1 so they don't even write out the orientation to exif. Hence we were fooled into thinking it wasn't working.

对于确实有方向的图像，该值是可读的，可以解释如下(那些是 F 的顺便说一句):

For images that do have orientation, the value is readable and can be interpreted as below (those are F's btw):

  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

这篇关于在 JavaScript 中确定照片的方向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！