最近做了一个植物展示平台,用户可以按多种方式检索植物信息。也可以自己上传植物图片及信息。
平台运行一段时间后,接到客户反馈,部分图片上传后方向发生了翻转。
我:
后台是用php写的,文件上传过来就重命名为 MD5+原文件名
的形式,没有其他任何特殊操作。
遂拿出问题的图片研究研究。发现在我笔记本上显示正常,上传后网页端显示横向,在服务器(Windows Server 2008)上查看图片也是横向的。对比上传前后图片的MD5也完全一致。
图片直接用浏览器打开显示正常:
在html中加载显示异常:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="file://C:\Users\user\Desktop\09a4d981088fe14f4150056c38044592.png" alt=""> </body> </html>
这是候就想到应该是图片的问题了,于是去查了下资料。果然,数码相机或手机拍摄的图片,如果拍照时,手持方式不是上下端正的方向,尽管在设备中看到的图片是上下端正的,但是其实图片是翻转或者倾斜的。
在电脑上查看图片时,尽管图片实际方向是横向的,但是看图软件会自动调整。调整的依据就是exif信息。exif头就是图片的附加信息,其中一个叫orientation的方向信息,表示拍摄时方向。
问题已经找到,接下来就是如何解决了。
利用JS插件exif.js
官网链接
看了下,获取虽然容易,但旋转图片还要动前端代码,懒得动前端。。。
在用户上传图片的时候,服务判断图片是否包含exif信息,如果包含,则将图片统一旋转正确的方向再存储。
php代码:
$file = "../root/$fname.png"; if (exif_imagetype($file) !== IMAGETYPE_JPEG) return; $image = imagecreatefromstring(file_get_contents($file)); $exif = exif_read_data($file); //注意先在php.ini中开启exif扩展 if(!empty($exif['Orientation'])) { switch($exif['Orientation']) { case 8: case 7: $image = imagerotate($image,90,0); break; case 3: case 4: $image = imagerotate($image,180,0); break; case 6: case 5: $image = imagerotate($image,-90,0); break; } } $isSuccess = imagejpeg($image,$file); if (!$isSuccess) { echo json_encode(["status"=>"fail","msg"=>"图片存储错误!"]); return; }
PHP exif扩展开启方法:
1.在php.ini文件中找到;extension=php_exif.dll
,去掉前面的分号
2.在php.ini文件中找到;extension=php_mbstring.dll
,去掉前面的分号,并将此行移动到extension=php_exif.dll之前,使之首先加载。
3.找到[exif]段,把下面语句的分号去掉。
;exif.encode_unicode = ISO-8859-15 ;exif.decode_unicode_motorola = UCS-2BE ;exif.decode_unicode_intel = UCS-2LE ;exif.encode_jis = ;exif.decode_jis_motorola = JIS ;exif.decode_jis_intel = JIS
参考:
1、PHP exif扩展方法开启详解
2、利用exif js及脚本修正图片的orientation显示
3、php判断上传图片正反且翻转
4、php获取orientation信息