是否可以在不重新上传的情况下旋转 [并保存] 已上传的图像？

Question

我的网站有一个图片上传脚本，运行良好。如果需要，我已经包含 exif_read_data 来阅读和更正旋转。这行得通。尽管如此，我还是想增加在上传图像后纠正图像旋转的可能性，但无需从计算机重新上传文件。但是通过旋转已上传的图像。

我现在所做的是创建一个包含旋转值 0,90,180,-90 的下拉列表。我从我的电脑 select 上传一张图片，同时发送旋转值，让它以新的旋转角度上传。这也有效。

但是我想，是不是已经上传的图片不需要重新select从我的电脑上修改

编辑 ==> 我不是说如何旋转图像，这是很容易做到的事情，确实 Jquery。我的意思是旋转并将此旋转再次保存到服务器，但不涉及从我的计算机重新selecting文件的方式

有人建议怎么看吗？我用谷歌搜索/Whosebuged 了很多，但似乎找不到很多关于这个的东西。

谢谢

编辑 2=>

执行已发送表单的 php 页面有一段代码如下所示。

if(!$fileNamephoto){

if($rotationAngle != "0"){

$degrees = $rotationAngle;

header('Content-type: image/jpeg');

$filename = $originalImage;

$source = imagecreatefromjpeg($filename) or notfound();
$rotate = imagerotate($source,$degrees,0);

imagejpeg($rotate);
imagedestroy($source);
imagedestroy($rotate);

}

其中$originalImage为已上传图片的路径。应该应用旋转的那个。

我想检查是否 select 从下拉列表中编辑了新图像，如果没有，是否设置了旋转。如果是，我希望上传/保存带有旋转角度的原始文件名

但也许（我现在认为）它不需要执行整个图像上传脚本，因为它已经准备好调整大小、压缩和重命名等等。

Answer 1

您可以创建 css 类如：

.rotate-90{
   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-180{
   -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate-270{
   -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

你的下拉列表如下：

<select class=".rotation">
    <option value="0">No Rotation</option>
    <option value="90">Rotate 90 deg</option>
    <option value="180">Rotate 180 deg</option>
    <option value="270">Rotate 270 deg</option>
</select>

并在您的下拉值更改时应用它：

$('.rotation').on('change',function(){
   $('img').removeClass('rotate-0);
   $('img').removeClass('rotate-90);
   $('img').removeClass('rotate-180);
   $('img').removeClass('rotate-270);
   if($(this).val() !== 0) $('img').addClass(`rotate-${$(this).val()}`)
});

或者，您可以直接使用 javascript.

来申请，而不是创建 css 类

更新：考虑您的编辑问题。好吧，当页面加载时你当然有 imageId 以及下拉列表的选定值，所以你可以创建一个 php 文件从数据库（或保存它的任何地方）获取图像并应用旋转在上面：

$.post('your-new-rotation-page-php', {rotation: $('.rotation').val(), id: yourImageId} ,function(){  /**/  });

Answer 2

这里是 jQuery 旋转图像的函数。

$('#degree').change(function() {
  var deg = $(this).val();
  roteImg(deg); // Pass your rotate degree here when call a function.
});

function roteImg(deg) {
  $('#imgID').animate({
    transform: deg
  }, {
    step: function(ind, fn) {
      $(this).css({
        '-webkit-transform': 'rotate(' + ind + 'deg)',
        '-moz-transform': 'rotate(' + ind + 'deg)',
        'transform': 'rotate(' + ind + 'deg)'
      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.stack.imgur.com/yGsis.gif" id="imgID" />
<select id="degree">
  <option value="0">0</option>
  <option value="90">90</option>
  <option value="180">180</option>
  <option value="-90">-90</option>
</select>

Answer 3

我想我的问题已经解决了。

我所做的是将隐藏字段中的原始图像名称发送到处理上传的 php 文件。

如果我不上传新文件，但如果我确实设置了不同于 0 的旋转角度，我会使用包含图像路径的隐藏 $_POST 变量来旋转图像，并通过调用 imagejpeg 来替换它原始文件名

$originalImage = $_POST['originalImage'];
$rotationAngle =  addslashes($_POST['rotationAngle']);

if(!$fileNamephoto){

if($rotationAngle != "0"){

$degrees = $rotationAngle;

header('Content-type: image/jpeg');

$filename = $originalImage;

$source = imagecreatefromjpeg($filename) or notfound();
$rotate = imagerotate($source,"$degrees",0);

imagejpeg($rotate, $filename);
imagedestroy($source);
imagedestroy($rotate);

}

是否可以在不重新上传的情况下旋转 [并保存] 已上传的图像？

Is it possible to rotate [AND SAVE] an already uploaded image without reuploading?

php

upload

jquery

image

rotation