查看图片示例

测试图片示例

了解exif 百度百科

q: 什么情况下会出现图片旋转的问题？

a: Orientation值不为1且浏览器不支持EXIF-Orientation

exif的图片方向（Orientation）有：

注释： 描述（拍摄照片时数码相机上部对应的方位-左边对应的方位，平面4个方向镜像4个方向）

如果浏览器支持EXIF-Orientation，会按拍照时相机左上顶点（红点位置）至右下顶点渲染，所以能看到正确的图片。 不支持则会出现旋转的情况。

q: 如何解决图片旋转的问题 a: 使用图片处理库按照图片exif信息（旋转之类的操作）重新生成图片（新的图片已去掉exif相关信息）。

前端的实现思路

1. 如果浏览器支持EXIF-Orientation，直接绘制到canvas并重新生成图片
2. 如果浏览器不支持EXIF-Orientation，需要根据Orientation取值进行旋转绘制到canvas并重新生成图片

前端用到的工具库

• modernizr exiforientation 用于判断浏览器是否支持EXIF-Orientation
• ExifReader 用于获取Orientation取值

相关链接

• ImpulseAdventure - JPEG / Exif Orientation and Rotation
• exiforientation-setclasses
• ExifReader
• take-and-manipulate-photo-with-web-page