bug记录:图片上传至后台后,方向发生改变

匿名 (未验证) 提交于 2019-12-03 00:18:01

最近做了一个植物展示平台,用户可以按多种方式检索植物信息。也可以自己上传植物图片及信息。

平台运行一段时间后,接到客户反馈,部分图片上传后方向发生了翻转。
我:

后台是用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信息

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!