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

Question

My website features an image upload script that's working fine. I've included exif_read_data to read and correct rotation if needed. This works. Nonetheless, I would like to add the possibility to correct rotation of images after they have been uploaded, but without re-uploading the file from the computer. But by rotating an image that's already uploaded.

What I did now is create a dropdown that contains rotation values 0,90,180,-90. I select an image from my computer, and upload it, sending the rotation value along with it to have it uploaded with a new rotation angle. This also works.

But I want, is the already uploaded image to be corrected without having to reselect from my computer

EDIT ==> I don't mean how to rotate an image, this is something a can quite easily do, indeed with Jquery. I mean to rotate and save this rotation again to server, but in a way that does not involve reselecting the file form my computer

Anyone suggestions in what way to look? I googled / stackoverflowed quite a bit, but can't seem to find a lot on this.

Thanks

EDIT 2=>

the php page that executes the sent form has a code that look like this.

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);

}

in which $originalImage is the path of the already uploaded image. The one that the rotation should get applied to.

I figured to check if a new image was selected form the dropdown, and if not if a rotation was set. If yes, I want the Originalfilename to be uploaded / saved with rotation angle

But maybe (I think now) it need not to go through the whole image-upload script, since it's al;ready resized and compressed and renamed and so on.

Ashkan Mobayen Khiabani · Answer 1 · 2020-12-15T11:21:16.160

You can create css classes like:

.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);
}

and your dropdown like:

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

and apply it when your drop down value changes:

$('.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()}`)
});

Alternatively, instead of creating css classes, you may apply then directly using javascript.

Update: Considering your edit on question. well you have the imageId of course when the page is loaded and also the selected value of the dropdown, so you can create a php file that gets the image from database (or wherever it is saved) and you apply the rotation on it:

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

Hi, thanks for suggesting. I realise my question was posted not clear enough. I edited it in italics. What I mean is to indeed rotate (and indeed visiualize with jquery) but what I meant MAINLY is how to then save this rotation to this image (with php) — Sam, Dec 15 '20 at 11:12

4b0 · Answer 2 · 2020-12-15T09:04:59.013

0

Here is jQuery function to rotate your image.

$('#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>

edited Dec 15 '20 at 09:04

answered Dec 15 '20 at 08:57

4b0

21,981
30
95
142

Thanks, but it was not entirely what I meant. I edited the question and explained a bit more in my comment to Ashkan Mobayen Khiabani – Sam Dec 15 '20 at 11:15
See this old SO [question](https://stackoverflow.com/questions/11259881/how-to-rotate-image-and-save-the-image) – 4b0 Dec 15 '20 at 11:19

score 0 · Accepted Answer · answered Dec 15 '20 at 23:22

I think I solved my issue.

What I do, is send the original imagename in a hidden field to the php file that processes the upload.

if I do not upload a new file, but if I do set a different rotation angle than 0, I use a hidden $_POST variable that contains the image path to rotate the image, and replace it by calling imagejpeg on the original filename

$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?

3 Answers3