我应该如何使用jQuery/PHP调整从智能设备捕获和上传的图像的方向


How should I adjust the orientation of the image captured and uploaded from smart devices using jQuery/PHP?

我正在使用PHP,jQuery,AJAX,HTMl5,Bootstrap框架(v.3.3.0(为我的网站。

我允许用户使用设备的相机捕获照片并将其上传到服务器。

我面临的问题是,当我上传此类捕获的图像时,保存在服务器上的图像的方向会发生变化。这意味着,如果在拍照时手机的方向是纵向的,并且这种纵向方向图像被加载到服务器,那么服务器上保存的图像的方向将更改为横向。

我应该如何避免这种情况?

以下是我的代码:

网页代码 :

<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 code :

$('#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.";
    }
  }
?>

问题不在于上传文件。文件正在上传。问题在于上传图像的方向变化。我想避免那件事。捕获和上传的图像的方向应相同。

如果您需要有关我的问题的任何进一步信息,请告诉我。

提前谢谢。

使用 imageMagick 打开图像并从 JPEG 的 exif 数据中检查方向。

<?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文件中包含上层函数,你必须有imagick可用。

如果您不想使用 Imagic,请尝试使用函数 exif_read_data(( 打开 jpeg。

<?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。取向:

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.