在JavaScript中确定照片的方向？ [英] Determine orientation of photos in JavaScript?

问题描述

我们使用 FileReader 从iPhone上拍摄的照片将图像导入浏览器。然后，我们使用 drawImage（）将该图像绘制到画布。问题是在iPhone显示器上拍的照片在页面上旋转。

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.

我们可以轻松地旋转画布上的图片我们如何确定所需的旋转？我们尝试了一些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读取exif数据.js。

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的btw） ：

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中确定照片的方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！