php中照片旋转 (orientation) 问题的正确处理

iPhone和一些数码相机在拍照的时候往往会在图片里面加入很多的照片信息(exif),比如拍照时间、光圈大小、曝光时间、GSP地理信息以及拍摄时相机倾斜状态等等,这些信息往往会提供给某些系统来对图片进行正确的显示,但是我们在对处理图片的时候通常会丢失掉那些图片信息,这就会导致显示出现问题,很典型的一个显示错误就是对Iphone拍摄的照片进行剪裁之后发现图片旋转了90度,这个时候就需要对图片进行相应的处理。

背景

博主是在一个小项目中遇到的这个问题,这个项目虽然小,但是涉及到的各种坑真的可以写一篇比较长的技术文章了,这里先不描述,后面单独发一篇关于这个项目的文章,把所涉及到的知识点以及坑点一一描述。

这个小项目中遇到的问题之一就是,我需要使用html5的canvas把读取到的图片进行剪裁,然后渲染到画布上。很简单的一个需求,但是在Iphone上测试经常会看到剪裁完之后图片自动旋转了90度,安卓机上不存在这个问题。

分析

之前就遇到过这个问题,iPhone拍摄的照片复制到win7上打开图片就是一个倒过来的,而在手机上看却没有问题,这就是因为exif信息在搞鬼,简单点说exif就是保留了图片的拍摄参数,显示的时候程序会读取图片的exif信息,如果exif信息不存在,那么图片就是按照最原始的形式显示,如果有exif信息,程序就会按照exif来。

这里博主遇到的情况是图片在进行剪裁的时候导致exif信息丢失,本来程序读取exif中图片要求顺时针旋转90°,现在exif丢失,程序读不到,默认图片不用旋转,那么我们看到的图片就是倒着的,这里应该怎么解决呢?

在这个项目中,由于读取的图片存在跨域问题,不能直接对本地的图片进行裁剪,所以是先上传到远程服务器,生成一个远程的地址,然后再用canvas读取远程地址,这样就解决了跨域问题。

现在摆在博主面前就有两种解决方案了

只用exif.js本地读取图片的exif信息,直接在客户端进行判断

上传到服务器的时候对图片进行处理,返回的远程地址已经是处理过的图片

对这两种方案进行对比,第一种方案看起来确实挺适合,直接在前端进行处理,这里会非常节省服务器资源,但是缺点也很明显,canvas对图片的渲染有一定的限制,当图片过大的时候渲染就会失败,而在这个项目中客户要求最后生成的图片一定要高清大图,上传的照片一般都有3~5M大小,这么大的图片大多数时候canvas都无法处理。

exif.js的原理其实比较简单,就是把图片转换成base64字符串,对其中的信息进行解析,所以一旦要对大图进行处理的时候就会出现问题,数据量太大,导致失败。

第一种方案不可行就只能选择第二种方案了,项目后端使用php做中转处理,前面说了需要生成一个远程地址,php负责把接收到的图片存储在远程服务器,然后返回一个地址给前端,这里只需要在存储之前对图片做处理就可以解决这个问题。

解决

首先给出完整代码,然后对代码进行解释

include_once ("../weixin/jssdk.php"); $jssdk = new JSSDK("wx**************", "******************************"); $access_token = $jssdk->getAccessToken(); $media_id = $_POST['i']; $savePathFile = '/upload/temps/'.date('YmdHis').rand(1000,9999).'.jpg'; $targetName = __DIR__.$savePathFile; $str = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id; $image = imagecreatefromstring(file_get_contents($str)); $exif = exif_read_data($str); if(!empty($exif['Orientation'])) { switch($exif['Orientation']) { case 8: $image = imagerotate($image,90,0); break; case 3: $image = imagerotate($image,180,0); break; case 6: $image = imagerotate($image,-90,0); break; } } imagejpeg($image,$targetName); echo json_encode(array("code"=>0,'d'=>$exif['Orientation'],"path"=>$savePathFile));

看起来确实比较简单,主要还是调用了一些内部函数,处理起来就方便多了。

这个项目使用了微信的上传接口,所以php需要从微信的临时服务器上把用户上传的图片取回来,通过file_get_contents方法就能快速拿到,当然也可以用curl来做。接着使用imagecreatefromstring创建一个图片的缓存,正常情况下如果不需要对图片进行处理,那么接下来就可以直接存储了,这里我们还需要对图片进行一些操作。

通过 exif_read_data 方法可以直接读取到图片的exif信息。

注意:exif_read_data 这个方法是exif扩展里面的方法,如果不能执行,请检查扩展是否安装,是否开启等。

exif模块里面还有很多有意思的方法,可以拿来做很多有用的东西,比如拿来批量采集并分析图片,提取图片信息等。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/21d9878c6ed87461082b21a1943673ab.html