Search code examples
phpimage-processinggdimage-rotation

PHP imagerotation rotating to a fixed position


So i'm using imagerotate() to rotate an image by 90 degrees on button press using ajax which is working fine but my issue is the rotation seems to be fixed?

Basically when i press the button it rotates the image to its 90 degree anticlockwise position but when i press it again it doesnt rotate it by a further 90 degrees anticlockwise (thus making it 180 in total) it just remains in its current 90 degree position.

$img = imagerotate($img, 90, 0);

Is this its normal behavior or am i doing something wrong? If so is there another method i could use instead?

Thanks.


Solution

  • You can use javascript to do this on click fairly easily (fiddle), by increasing the angle as desired on click:

    var angle = 90;
    
    $('#flower').click(function() {
      $(this).css({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-moz-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)',
        '-ms-transform': 'rotate(' + angle + 'deg)'
      });
      angle += 90;
    });
    #flower {
      position: fixed;
      display: block;
      border:1px  solid grey;
      margin-top: 20px;
      margin-left: 20px;
      height: 100px;
      width: 100px;
      padding: 15px;
      transition: all .5s ease-out;
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
      -ms-transition: all .5s ease-out;
      -o-transition: all .5s ease-out;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <img src="http://www.rachelgallen.com/images/snowdrops.jpg" id="flower" alt="turning">

    You would need to pass separate angle values into the imagerotate php function, so you could either use the javascript or set the rotated-image as the source image to rotate on second click using the php method.

    Hope this helps