如何使用jQuery或PHP保持与保存到服务器的图像相同的图像方向,以适当的为准


How to keep the same image orientation of the image being saved to the server using jQuery or PHP whichever is appropriate?

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

我的网站主要面向智能手机和智能设备的用户。因此,它应该可以在移动浏览器以及PC/笔记本电脑浏览器上运行良好。

在我的一个表单中,我为用户提供了一种工具,可以从设备相机捕获图像或选择设备图像库中的现有图像。在此之后,相同的图像应上传到服务器。

现在一切都工作得非常好,很完美。唯一持续存在的问题是图像方向的变化。

让我集中谈谈我面临的问题。如果用户使用设备相机以"横向"拍摄照片,如果我查看保存在服务器上的图像,则同一图像的方向将更改为"纵向"。如果用户以"纵向"捕获照片,则也会发生同样的事情,它会在服务器图像上更改为"横向"。

我用

谷歌搜索了很多这个解决方案,然后我开始了解"Imagick PHP扩展"。但是由于默认情况下未激活此扩展程序,因此我无法在服务器上启用它,因为我没有权限执行此操作。所以我要求使用jQuery或PHP的其他解决方案,在这种情况下是有益的。

以下是我的代码供您参考:

网页代码:

<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) {
      $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;
        }
    }
}
?>

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

谢谢。

就我个人而言,我不会费心直接使用 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