Я пытаюсь загрузить изображение с кодировкой 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, но не хочу по причинам, таким как черные фоны и т. Д.
Если вы можете помочь … вы самый удивительный человек!
Я предполагаю, что изображение, которое вы загружаете, фактически повернуто, но исправляется, поскольку оно содержит данные о ротации в разделе EXIF. (Например, фотокамера может быть осведомлена о портретной ориентации при съемке фотографии и сохранять эту информацию в данных EXIF, а некоторое программное обеспечение просмотра знает данные о вращении и автоматически поворачивает фотографию при просмотре.) В этом случае , изображение может просто отображаться для вас, в зависимости от того, что вы используете для его просмотра.
Вы просматриваете изображения «перед загрузкой» и «после загрузки» с использованием того же программного обеспечения? Что произойдет, если вы посмотрите на них, используя один и тот же веб-браузер, скажем?
Что произойдет, если вы попробуете другое изображение, желательно из другого источника? У вас есть программное обеспечение, которое позволит вам просматривать данные EXIF изображения? Найдите значение «Ориентация»; ничего, кроме «1», означает, что для изображения установлен поворот (см. эту страницу для достойного описания).
Итак, в целом, я бы сказал, что основное изображение в файле JPEG находится в «неправильной» ориентации, а данные EXIF содержат информацию для исправления этого поворота для отображения. Это очень вероятно, если источником является, например, iPhone, который только что играл с моим, по-видимому, сохраняет свои базовые данные изображения в альбомной ориентации, но устанавливает данные EXIF, если изображение было фактически принято (и поэтому должно отображаться ) как портрет.
Лучший способ исправить это почти наверняка, чтобы проверить данные EXIF в файле после загрузки, используя функции PHP EXIF и повернуть изображение по мере необходимости, чтобы исправить ориентацию, прежде чем сохранять свою собственную копию.
Я столкнулся с этой проблемой при создании мобильного гибридного приложения, которое использовало Cordova для доступа к камере мобильных телефонов, а затем отправляло изображение на сервер. Я разрешил это, установив для свойства correctOrientation значение true.
navigator.camera.getPicture(onSuccess, onFail, { quality: 80, destinationType:Camera.DestinationType.DATA_URL, correctOrientation : true });
<?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>