2

<script type="text/javascript">

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

$('.rotate').click(function() {
    rotation += 90;
    $(this).rotate(rotation);
});


</script>
 <a href="image/<?php echo $data['dir']; ?>" download="image/<?php echo $data['dir']; ?>">Download This Image</a>

I want to rotate an image with jQuery, then I want to be able to save the resulting image which is the rotated version of the origianl. I followed the instructions at: How to rotate a div using jQuery without much success. What can I do to fix this problem ?

Community
  • 1
  • 1
IIM NUR DIANSYAH
  • 434
  • 1
  • 8
  • 18
  • You need to show the code you are actually using. We have no way of helping if we can't see how you are trying to do it. Also that link shows how to rotate an element, if you are trying to do image manipulation you have to use [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) – Patrick Evans Feb 11 '16 at 02:30
  • i have edited my post, sorry :) – IIM NUR DIANSYAH Feb 11 '16 at 02:43
  • css only rotates the image on the screen, doesn't change the orientation of the Image itself. To Achieve this you could render the image (rotated) into a canvas and then save the imageData of the canvas. – Thomas Feb 11 '16 at 03:13
  • when i follow this link : http://www.ajaxblender.com/howto-rotate-image-using-javascript-canvas.html the problem is done. i can rotate and save them. thanks for all response. :) – IIM NUR DIANSYAH Feb 11 '16 at 10:12

1 Answers1

1

The transform property modifies the coordinate space of the CSS visual formatting model and does not modify the source image. You will instead want to load the image into a canvas element and then perform your modifications using the canvas API. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

derekspaceellis
  • 26
  • 2