Изображение автоматически поворачивается при загрузке
Я пытаюсь загрузить изображение с кодировкой base64 и сохранять после его декодирования. Изображение загружается и сохраняется, и я могу получить к нему доступ с помощью URL-адреса и всего... но изображение поворачивается на 90 градусов против часовой стрелки, и я понятия не имею, ПОЧЕМУ!!
Место, где я получаю закодированные данные, отлично, так как установка его в <img />
работает нормально!
function saveImageData($base64Data) {
$base64_decoded = base64_decode($base64Data);
$im = imagecreatefromstring($base64_decoded);
if ($im !== false) {
$imagepath = '/public/uploads/' . time() . '.jpg';
imagejpeg($im, $imagepath);
chmod($imagepath, 0755);
imagedestroy($im);
} else {
return false;
}
return $imagepath;
}
Я не использую никаких функций вращения, но все равно его поворачиваю. Я могу использовать функцию PHP GD, такую как imagerotate, но не хочу по причинам, таким как черные фоны и т.д.
Если вы можете помочь... вы самый удивительный человек!
Ответы
Ответ 1
Я предполагаю, что загружаемое изображение на самом деле повернуто, но исправляется, потому что оно содержит данные о ротации в своем разделе EXIF. (Например, фотокамера может быть осведомлена о портретной ориентации при съемке фотографии и сохранять эту информацию в данных EXIF, а некоторое программное обеспечение просмотра знает данные о вращении и автоматически поворачивает фотографию при просмотре.) В этом случае, изображение может просто отображаться для вас, в зависимости от того, что вы используете для его просмотра.
Вы просматриваете изображения "перед загрузкой" и "после загрузки" с использованием того же программного обеспечения? Что произойдет, если вы посмотрите на них, используя один и тот же веб-браузер, скажем?
Что произойдет, если вы попробуете другое изображение, желательно из другого источника? У вас есть программное обеспечение, которое позволит вам просматривать данные EXIF изображения? Найдите значение "Ориентация"; ничего, кроме "1", означает набор поворота для изображения (см. эту страницу для достойного описания.)
Итак, в целом, я бы сказал, что основное изображение в файле JPEG находится в "неправильной" ориентации, а данные EXIF содержат информацию, чтобы исправить это вращение для отображения. Это очень вероятно, если источником является, например, iPhone, который только что играл с моим, по-видимому, сохраняет свои базовые данные изображения в альбомной ориентации, но устанавливает данные EXIF, если изображение было фактически принято (и поэтому должно отображаться ) как портрет.
Лучший способ исправить это почти наверняка, чтобы проверить данные EXIF в файле после загрузки, используя функции PHP EXIF и повернуть изображение по мере необходимости, чтобы исправить ориентацию, прежде чем сохранять свою собственную копию.
Ответ 2
Я столкнулся с этой проблемой при создании мобильного гибридного приложения, которое использовало Cordova для доступа к камере мобильных телефонов, а затем отправляло изображение на сервер. Я разрешил это, установив для свойства correctOrientation значение true.
navigator.camera.getPicture(onSuccess, onFail,
{
quality: 80,
destinationType:Camera.DestinationType.DATA_URL,
correctOrientation : true
});
Ответ 3
<?php
if (isset($_POST['submit'])) {
$filename = $_FILES['file']['name'];
$filePath = $_FILES['file']['tmp_name'];
$exif = exif_read_data($_FILES['file']['tmp_name']);
echo "<pre>";
print_r($exif);
echo "</pre>";
if (!empty($exif['Orientation'])) {
$imageResource = imagecreatefromjpeg($filePath);
switch ($exif['Orientation']) {
case 3:
$image = imagerotate($imageResource, 180, 0);
break;
case 6:
$image = imagerotate($imageResource, -90, 0);
break;
case 8:
$image = imagerotate($imageResource, 90, 0);
break;
default:
$image = $imageResource;
}
imagejpeg($image, $filename, 90);
}
}
?>
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="col-md-9">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Choose img<input type="file" name="file" id="imgInp">
</span>
</span>
</div>
</div>
</div>
<button name="submit" type="submit">Send</button>
</form>