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

Question

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

Я разрешаю пользователю снимать фотографию с помощью камеры устройства и загружать ее на сервер.

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

Как этого избежать?

Ниже мой код:

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) { 
     echo "File is an image - " . $check["mime"] . "."; 
     $uploadOk = 1; 
    } else { 
     echo "File is not an image."; 
     $uploadOk = 0; 
    } 
    } 
    // Check if file already exists 
    if (file_exists($target_file)) { 
    echo "Sorry, file already exists."; 
    $uploadOk = 0; 
    } 
    // Check file size 
    if ($_FILES["student_image"]["size"] > 500000) { 
    echo "Sorry, your file is too large."; 
    $uploadOk = 0; 
    } 
    // Allow certain file formats 
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") { 
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
    } 
    // Check if $uploadOk is set to 0 by an error 
    if ($uploadOk == 0) { 
    echo "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)) { 
     echo "The file ". basename($_FILES["student_image"]["name"]). " has been uploaded."; 
    } else { 
     echo "Sorry, there was an error uploading your file."; 
    } 
    } 
?> 

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

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

Заранее спасибо.

Answer 1

Использование imageMagick открыть изображение и проверить ориентацию из exif-данных JPEG.

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
     case imagick::ORIENTATION_BOTTOMRIGHT: 
      $image->rotateimage("#000", 180); // rotate 180 degrees 
     break; 

     case imagick::ORIENTATION_RIGHTTOP: 
      $image->rotateimage("#000", 90); // rotate 90 degrees CW 
     break; 

     case imagick::ORIENTATION_LEFTBOTTOM: 
      $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
     break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?> 

Этот код поставляется непосредственно с помощью справочника php.net.

**PHP code :** 

    <?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) { 
      echo "File is an image - " . $check["mime"] . "."; 
      $uploadOk = 1; 
     } else { 
      echo "File is not an image."; 
      $uploadOk = 0; 
     } 
     } 
     // Check if file already exists 
     if (file_exists($target_file)) { 
     echo "Sorry, file already exists."; 
     $uploadOk = 0; 
     } 
     // Check file size 
     if ($_FILES["student_image"]["size"] > 500000) { 
     echo "Sorry, your file is too large."; 
     $uploadOk = 0; 
     } 
     // Allow certain file formats 
     if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") { 
     echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
     $uploadOk = 0; 
     } 
     // Check if $uploadOk is set to 0 by an error 
     if ($uploadOk == 0) { 
     echo "Sorry, your file was not uploaded."; 
     // if everything is ok, try to upload file 
     } else { 
     $filename = $_FILES["student_image"]["tmp_name"]; 
     $image = new Imagick($filename); 
     autoRotateImage($image); 
     $image->writeImage($filename); 
     if (move_uploaded_file($filename, $target_file)) { 
      echo "The file ". basename($_FILES["student_image"]["name"]). " has been uploaded and rotated maybe."; 
     } else { 
      echo "Sorry, there was an error uploading your file."; 
     } 
     } 
    ?> 

Попробуйте это. Конечно, вы должны включить верхнюю функцию в свой php-файл, и вы должны иметь доступную информацию.

Если вы не хотите использовать Imagic, попробуйте открыть jpeg с помощью функции exif_read_data().

<?php 
echo "test1.jpg:<br />\n"; 
$exif = exif_read_data('tests/test1.jpg', 'IFD0'); 
echo $exif===false ? "No header data found.<br />\n" : "Image contains headers<br />\n"; 

$exif = exif_read_data('tests/test2.jpg', 0, true); 
echo "test2.jpg:<br />\n"; 
foreach ($exif as $key => $section) { 
    foreach ($section as $name => $val) { 
     echo "$key.$name: $val<br />\n"; 
    } 
} 
?> 

Вы ищете IDF0.Orientation:

0x0112 Orientation unsigned short 1 The orientation of the camera relative to the scene, when the image was captured. The start point of stored data is, '1' means upper left, '3' lower right, '6' upper right, '8' lower left, '9' undefined.