时间戳

首页 > 解决方案 > 是否可以在不重新上传的情况下旋转 [并保存] 已上传的图像？

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

问题描述

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

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

但我想要的是，已经上传的图像是否可以被纠正而无需从我的电脑中重新选择

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

任何人建议以什么方式看？我用谷歌搜索了很多/stackoverflow，但似乎找不到很多。

谢谢

编辑 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 是已上传图片的路径。应该应用旋转的那个。

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

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

标签： phpjqueryimageuploadrotation

解决方案

您可以创建 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(){  /**/  });

推荐阅读