Как сохранить одну и ту же ориентацию изображения изображения, сохраненного на сервере, используя jQuery или PHP в зависимости от того, что подходит?

Question

Я использую PHP 5.5.18, jQuery, AJAX, HTML5, Bootstrap framework (v.3.3.0) для моего сайта.

Мой сайт в основном предназначен для пользователей смартфонов и смартфонов. Таким образом, он должен хорошо работать на мобильных браузерах, а также на ПК/ноутбуках.

В одной из моих форм я предоставляю пользователю возможность захватить изображение с камеры устройства или выбрать существующее изображение в галерее изображений устройства. После этого одно и то же изображение должно быть загружено на сервер.

Теперь все работает отлично и идеально. Единственная проблема, которая существует, заключается в изменении ориентации изображения.

Позвольте мне сосредоточиться на проблеме, с которой я столкнулся. Если пользователь делает фотографию с помощью камеры устройства в «Ландшафтной ориентации», ориентация одного и того же изображения меняется на «Портрет», если я смотрю на изображение, сохраненное на сервере. То же самое происходит, если пользователь фиксирует фотографию в «Портретной ориентации», она меняется на «Пейзаж» на изображении сервера.

Я много искал для этого решения, тогда я узнал о «Расширение PHP Imagick». Но поскольку это расширение не активировано по умолчанию, я не могу включить его на сервере , так как у меня нет привилегий сделать это. Поэтому я прошу какое-то другое решение с использованием jQuery или PHP, что выгодно в этой ситуации.

Ниже мой код для справки:

HTML код:

<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action=""> 
    <input type="file" name="student_image" id="student_image" accept="image/*" capture/> 
</form> 

JQuery-AJAX код:

$('#request_form').submit(function(e) { 

    var form = $(this); 

    var formdata = false; 

    if(window.FormData) { 
    formdata = new FormData(form[0]); 
    } 

    var formAction = form.attr('action'); 

    $.ajax({ 
    url   : 'request.php', 
    type  : 'POST',  
    cache  : false, 
    data  : formdata ? formdata : form.serialize(), 
    contentType : false, 
    processData : false, 
    success: function(response) { 

     var responseObject = $.parseJSON(response);  
     if(responseObject.error_message) { 

     if ($(".alert-dismissible")[0]) { 
      $('.alert-dismissible').remove(); 
     } 
     alert(responseObject.error_message);  

     } else { 
     alert("Success");  
     } 
    } 
    }); 
    e.preventDefault(); 
}); 

PHP код:

<?php 
    $target_dir = "uploads/"; 
    $target_file = $target_dir . basename($_FILES["student_image"]["name"]); 
    $uploadOk = 1; 
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 
    // Check if image file is a actual image or fake image 
    if(isset($_POST["submit"])) { 
    $check = getimagesize($_FILES["student_image"]["tmp_name"]); 
    if($check !== false) { 
     $error_msg = "File is an image - " . $check["mime"] . "."; 
     $uploadOk = 1; 

    } else { 
     $error_msg = "File is not an image."; 
     $uploadOk = 0;  
    } 
    } 

    // Allow certain file formats 
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") { 
    $error_msg = "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
    } 
    // Check if $uploadOk is set to 0 by an error 
    if ($uploadOk == 0) { 
    $error_msg = "Sorry, your file was not uploaded."; 
    // if everything is ok, try to upload file 
    } else { 
    if (move_uploaded_file($_FILES["student_image"]["tmp_name"], $target_file)) { 
     $success = "The file ". basename($_FILES["student_image"]["name"]). " has been uploaded."; 
    } else { 
     $error_msg = "Sorry, there was an error uploading your file."; 
    } 
    } 

    if($error_msg != ''){ 
    $data = array(); 
    $data['error_message'] = $error_msg; 
    $data = json_encode($data);  
    echo $data; 
    die; 
    } else { 
    $data = array(); 
    $data['success_message'] = $success; 
    $data = json_encode($data); 
    echo $data; 
    die; 
    } 
?> 

У меня есть следующая функция, которая могла бы выполнить эту работу для меня, но я не понимаю, как дать вызов этой функции и как получить изображение из нее, которое должно быть сохранено на сервере. Пожалуйста, помогите мне в этом.

<?php 
function image_fix_orientation(&$image, $filename) { 
    $exif = exif_read_data($filename); 

    if (!empty($exif['Orientation'])) { 
     switch ($exif['Orientation']) { 
      case 3: 
       $image = imagerotate($image, 180, 0); 
       break; 

      case 6: 
       $image = imagerotate($image, -90, 0); 
       break; 

      case 8: 
       $image = imagerotate($image, 90, 0); 
       break; 
     } 
    } 
} 
?> 

Если вам нужна дополнительная информация о проблеме, с которой я сталкиваюсь, сообщите мне об этом.

Спасибо.

Answer 1

Лично я бы не стал напрямую использовать функции изображения PHP, а скорее полагался на существующую (абстракционную) библиотеку.

Представьте себе, что уже предусмотрено три водителя: GD, Imagick и Gmagick. https://github.com/avalanche123/Imagine

После включения библиотеки в ваш проект, используйте ее так, чтобы сохранить изображение, повернутое правильно, с камеры. Для этого потребуется расширение exif.

$imagefile = $_FILES["..."]["tmp_name"]; 
    if(class_exists('Gmagick')) 
    { 
     $imagine = new \Imagine\Gmagick\Imagine(); 
    } 
    elseif(class_exists('Imagick')) 
    { 
     $imagine = new \Imagine\Imagick\Imagine(); 
    } 
    else 
    { 
     $imagine = new \Imagine\Gd\Imagine(); 
    } 

    $image = $imagine->open($imagefile); 

    $filterAutorotate = new \Imagine\Filter\Basic\Autorotate(); 
    $filterAutorotate->apply($image); 

    $filename = 'brand new .jpg'; 
    $image->save($filename/*, array() $options/*); 

Чтение метаданных делать это вручную, смотрите здесь https://github.com/avalanche123/Imagine/blob/develop/lib/Imagine/Image/Metadata/ExifMetadataReader.php