0

enter image description herei have a variable which contains an image.can i rotate the image from javascript.

var img = new Image();
img.src='http://www.ittefaq.com.bd/admin/news_images/2013/07/29/thumbnails/image_60156.jpg';
//now i want to rotate this image. is this possible ?

i have tried to do it with canvas but it is not giving me desired result.

is this possible with javascript / jquery?

i dont want to use css. it does not serve my purpose.

interested in actually manipulating the image

MD TAHMID HOSSAIN
  • 1,581
  • 7
  • 29
  • 54

2 Answers2

1

Try this:

img.style.transform = "rotate(45deg)";

jsFiddle: here

frogatto
  • 28,539
  • 11
  • 83
  • 129
  • One may also need to set these others : -moz-transform / -webkit-transform / -ms-transform / -o-transform not sure their names in the object. (these are CSS names) – d'alar'cop Jul 29 '13 at 09:14
  • @d'alar'cop: Recently almost all modern browsers support the standard CSS – frogatto Jul 29 '13 at 09:18
  • Yes, but often we are forced to make things compatible with even IE6 (personal experience). Not a criticism just a note to others having a look in the future. – d'alar'cop Jul 29 '13 at 09:29
  • @d'alar'cop: You're right! – frogatto Jul 29 '13 at 09:34
0

If I am getting this correct, you want to rotate the image on frontend and are not interested in actually manipulating the image.

You can rotate images using CSS3 Transforms as explained here http://www.w3schools.com/cssref/css3_pr_transform.asp

HTML

<img class="exampleImage" src="http://www.corbisimages.com/images/Corbis-42-18522637.jpg?size=67&uid=c7ebc105-b4a4-4fad-8e7d-99ff79ac2ce4" height="300px"/>
<input type="range" min="-180" max="180" step="1" value="0" id="rotationAngle">

JavaScript

jQuery('#rotationAngle').on('mouseup', function(){
  jQuery('.exampleImage').css(
 '-webkit-transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)',
 'transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)');
});

Here is the fiddle for your reference.

Gaurav
  • 1,078
  • 2
  • 8
  • 18