最近做了一個植物展示平臺,用戶可以按多種方式檢索植物信息。也可以自己上傳植物圖片及信息。
平臺運行一段時間後,接到客戶反饋,部分圖片上傳後方向發生了翻轉。
我:
後臺是用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信息