html页面中拍照和上传照片那些事儿（二）

 

本文为原创，转载请注明出处： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/6895352.html 

 

本文主要说下iOS上传的照片在安卓机上翻转的问题。

问题：苹果机竖着拍个照片，上传到server，再在安卓手机打开，发现图片翻转了呵呵哒……

原因：苹果手机默认的方向是水平且home键向右的方向，所有竖着拍照相当于顺时针转了90度，恩。所以到安卓手机上翻了90度。

解决方法：

1. 前端js解决

　　利用canvas和exif.js（用于读取图片的exit信息，如orientation）达到目的。

　　思路：

　　html --  input(type=file)输入框，用于上传图片的

　　js -- 用FileReader读取file文件，将结果用于新建一个图片Image的src，图片加载完成后创建一个canvas，根据图片大小设置canvas的宽高，将图片画到canvas画布上。用exif.js读取图片的orientation相机的方向信息（1-8），根据方向决定canvas画布需要转多少度，最后将旋转后的canvas转化成dataurl赋值给dom预览。

　　orientation参考这里。

 

　　弊端：这样只能改变本地预览的图片方向，如果是直接向server发送file文件作为request data，则此方法不能达到目的。

 

2. server端解决

　　server端拿到图片后处理orientation，这可以从根本上解决问题。