bug記錄:圖片上傳至後臺後,方向發生改變

最近做了一個植物展示平臺,用戶可以按多種方式檢索植物信息。也可以自己上傳植物圖片及信息。

平臺運行一段時間後,接到客戶反饋,部分圖片上傳後方向發生了翻轉。
我:
一臉懵逼.jpg

後臺是用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的方向信息,表示拍攝時方向。

問題已經找到,接下來就是如何解決了。

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信息

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章