确定照片在JavaScript中的方向?

我们使用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 

即使没有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进行“加载”,创build一个canvas,然后绘制canvas到图像上,这样做是摆脱了与图像的任何iphone相关的“exif”旋转,因为canvasdrawImage擦除exif数据。

当绘制完成后,您将看到您的图像“旋转”回到它在PC浏览器上的显示效果