我们正在使用 FileReader 从iPhone上拍摄的照片到浏览器中获取图像。然后我们使用 drawImage() 将图像绘制到 canvas。问题是在iPhone显示屏上拍摄的照片在页面上旋转。我们无法在任何Android设备上重现这一点。
我们可以在上面旋转图像 canvas 很容易，但我们如何确定所需的旋转？我们尝试了一些用于JavaScript的EXIF读取库（exif.js）但无法成功阅读方向。
我们正在使用 FileReader 从iPhone上拍摄的照片到浏览器中获取图像。然后我们使用 drawImage() 将图像绘制到 canvas。问题是在iPhone显示屏上拍摄的照片在页面上旋转。我们无法在任何Android设备上重现这一点。
我们可以在上面旋转图像 canvas 很容易，但我们如何确定所需的旋转？我们尝试了一些用于JavaScript的EXIF读取库（exif.js）但无法成功阅读方向。
好吧，事实上它看起来像你 能够 使用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
好吧，事实上它看起来像你 能够 使用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
即使没有binaryajax.js也能很好地工作
只是用
EXIF.getData(changeEvent.target.files[0], function () {
alert(EXIF.pretty(this));
});
也 这里 你可以看到另一个例子。
或者，如果您只想要Orientation标记：
EXIF.getData(file, function () {
alert(this.exifdata.Orientation);
});
我的两分钱是exif-js框架对我不起作用而且不是必需的。
相反，你可以做的是你的图像src的'onload'，创建一个画布，然后在你的图像上方绘制你的画布，这实现了摆脱任何iphone相关的'exif'旋转图像，因为画布drawImage擦除exif数据。
绘制完成后，您将看到图像“旋转”回到PC浏览器的外观