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

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

平台运行一段时间后,接到客户反馈,部分图片上传后方向发生了翻转。
我:
bug记录:图片上传至后台后,方向发生改变_第1张图片

后台是用php写的,文件上传过来就重命名为 MD5+原文件名 的形式,没有其他任何特殊操作。

遂拿出问题的图片研究研究。发现在我笔记本上显示正常,上传后网页端显示横向,在服务器(Windows Server 2008)上查看图片也是横向的。对比上传前后图片的MD5也完全一致。

图片直接用浏览器打开显示正常:

在html中加载显示异常:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<img src="file://C:\Users\user\Desktop\09a4d981088fe14f4150056c38044592.png" alt="">
body>
html>

这是候就想到应该是图片的问题了,于是去查了下资料。果然,数码相机或手机拍摄的图片,如果拍照时,手持方式不是上下端正的方向,尽管在设备中看到的图片是上下端正的,但是其实图片是翻转或者倾斜的。

在电脑上查看图片时,尽管图片实际方向是横向的,但是看图软件会自动调整。调整的依据就是exif信息。exif头就是图片的附加信息,其中一个叫orientation的方向信息,表示拍摄时方向。

问题已经找到,接下来就是如何解决了。

1、 客户端解决

利用JS插件exif.js
官网链接
看了下,获取虽然容易,但旋转图片还要动前端代码,懒得动前端。。。

2、服务端解决

在用户上传图片的时候,服务判断图片是否包含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信息

你可能感兴趣的:(bug笔记)