Not sure why there hasn't been examples posted but here's a simple one that works great but I can't do anything to the picture after rotating it (like resize it) or it disappears. (I'm sure it's something simple... it always is.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.rotate.1-1.js"></script>
</head>
<body>
<table>
<tr><td align="left"><input type="button" value="<-Rotate" name="RotateL" class="inputSubmit" id="RotateL" onclick="$('#pic').rotateLeft();"><input type="button" class="inputSubmit" value="Rotate->" name="RotateR" id="RotateR" onclick="$('#pic').rotateRight();"></td></tr>
<tr><td align="left"><img border="0" src="images/backgrounds/WPVolleyball.jpg" name="pic" id="pic"></td></tr>
</table>
</body>
</html>

Comment by webshankara, Dec 28, 2007

I got a nice code to rotate an image preserving its tranparancy on browser using AJAX and PHP...

Please check this code

?php header('Content-type: image/png') ; @$image = $GET["imagename"]; @$img = $GET["img"]; @$adegrees = $GET["adegrees"];

//@$image=str_replace("pngs1","ori",$image); @$Arr1=explode("/",$image); @$Arr2=explode("",$Arr1sizeof($Arr1)-1?); @$fileNm=$Arr2sizeof($Arr2)-1?; @$nfile=$fileNm; @$image="../../dress-images/ori/$nfile"; if($image=="") { $image="rw/temp/t1981_7.png"; $imageback="../../images/spacer1.gif"; } @$maxX=0; @$maxY=0; @$minX=0; @$minY=0; if(@$adegrees=="") { $degrees =90; }else{ $degrees =$adegrees; } //$x=4; //$y=4;

$imgImage = imagecreatefrompng($image); $w=imagesx($imgImage); $h=imagesy($imgImage); $destImage = imagecreatetruecolor($w*2,$h*2); $trans_color = imagecolorallocatealpha($destImage,255,255,255,0); imagefill($destImage, 0,0,$trans_color); $rw = floor($w/3); $rh = floor($h/3);

$degrees = $degrees + 180 ; $degrees = deg2rad($degrees);

$cosangle = cos($degrees); $sinangle = sin($degrees);

$transparentColor = imagecolorallocate($destImage, 0, 0, 0 ); for($i=0;$i<$w;$i++) { for($j=0;$j<$h;$j++) {

// rotate... $old_x = (($rw-$i) $cosangle + ($rh-$j) $sinangle)

+ $rw;

$old_y = (($rh-$j) $cosangle - ($rw-$i) $sinangle)

+ $rh;

$old_x=$old_x+$w/3; $old_y=$old_y+$h/3;

@$rgb=imagecolorat($imgImage, $i, $j); $cols = imagecolorsforindex($imgImage, $rgb); //$trans=imagecolorallocate($destImage,255,99,140); //imagecolortransparent($destImage,$trans);

$a = $cols'alpha'?; $r = $cols'red'?; $g = $cols'green'?; $b = $cols'blue'?;

$newX=$i+$rw-$degrees$j; $newY=$j+$rh+$degrees$i;

//echo "cooolor - $rgb"; //$gd = imagecreatetruecolor($i, $j); $trancount=0; if($a!=127) {

$col = imagecolorallocate($destImage,$r,$g,$b); imagesetpixel ( $destImage , $old_x, $old_y, $col );

//echo "- img - - ".$img; /////////////////////////////////////////////////// @$rgbk=imagecolorat($imgImage, $i, $j-1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; }

@$rgbk=imagecolorat($imgImage, $i-1, $j-1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; }

@$rgbk=imagecolorat($imgImage, $i-1, $j); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; }

@$rgbk=imagecolorat($imgImage, $i-1, $j-1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; }

@$rgbk=imagecolorat($imgImage, $i, $j+1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; } @$rgbk=imagecolorat($imgImage, $i+1, $j+1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; } @$rgbk=imagecolorat($imgImage, $i+1, $j); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; } @$rgbk=imagecolorat($imgImage, $i+1, $j-1); $colsk = imagecolorsforindex($imgImage, $rgbk); $hereA = $colsk'alpha'?; if($hereA==127) { $trancount++; } /////////////////////////////////////////////////////

//echo $trancount."<br>"; if($trancount==0) { imagesetpixel ( $destImage , $old_x+1 , $old_y+1,$col ); imagesetpixel ( $destImage , $old_x-1 , $old_y-1,$col ); imagesetpixel ( $destImage , $old_x+1 , $old_y-1,$col ); imagesetpixel ( $destImage , $old_x-1 , $old_y+1,$col );

/ imagesetpixel ( $destImage , $old_x+1 , $old_y,$col ); imagesetpixel ( $destImage , $old_x , $old_y -1,$col ); imagesetpixel ( $destImage , $old_x-1 , $old_y+1,$col ); imagesetpixel ( $destImage , $old_x , $old_y+1,$col ); / }

//imagesetpixel ( $destImage , $old_x+20-1 , $old_y +20-1,$col );

$col = imagecolorallocate($destImage,$r,$g,$b);

} imagecolortransparent($destImage,$trans_color); } }

imagepng($destImage,"../temp/".$img); imagepng($destImage); imagedestroy($destImage);

Comment by webshankara, Dec 28, 2007

the above code uses sine and cosine fuctions to figure out the rotaion with ange and reads each pixel and pasts its color and on destination image.

Comment by webshankara, Dec 28, 2007

The code above has has slight problem. to currect that i had make my image little noise but is there any way that i can get more better result in an easier way.

Comment by juvenile386, Mar 19, 2008

referring to the first example above(thanks for bothering to make one), is it possible to retain the width and height specified on the image tag? I tried to use the example, but added a specific height and width for the image, but after rotating the image it goes back to its original size...

Comment by webshankara, Mar 21, 2008

yes but for that you have to corp and resize the rotated image.

Comment by webshankara, Mar 21, 2008

the above code uses the cosine and sine functions so the resultant output angle a may also be decimal value. so it leaves some patchs or tiny dots on the the rotated image. In order over come that i adjested the above code so that it is the nearest dot color will be fill in empty or in the patches. This technique is useable now. Is there any better solution for this.

Comment by prasanna.tm, May 08, 2008

How to download this jquery-rotate library

Comment by prasanna.tm, May 12, 2008

@ rha...@csolve.net

two scripts you have used jquery.rotate.1-1.js and jquery.js. From where to download jquery.js and When i run you code i am getting a error like Function $ is unaviable so the image is not rotationg

Comment by igneous...@yahoo.com, May 30, 2008

http://docs.jquery.com/Downloading_jQuery is where you get jquery from and jquery.rotate.1-1.js can be found in the downloads section of code.google.com. I got it to work, but it flickers when it starts to rotate. I think it goes back to the original picture's orientation and then from there moves the image the set number of degrees for rotation. I could rotate it by ten degrees each way, but that flicker and distortion isn't really worth it.

Comment by strangevoices, Jun 14, 2008

Great script! Very cool. I'm just wondering if it's possible to make it work for particular images instead of all the images? Eg. Something like:

$('.mydiv').toggle(function() {

$(this).children('img').rotateLeft(45);

}, function() {

$(this).children('img').rotateRight(45);

});

But the line:

p = this.get(0);

creates an array of all the images and becomes 'undefined' after it has gone through the array. Any help appreciated! Cheers.

Comment by mattonik, Jun 17, 2008

looks nice, my question is: is it usable for rotating text too?

Comment by kari...@hotmail.de, Aug 20, 2008

$this Javascript code work fine in Mozilla and IE without Problem (tested)

/////////////// jQuery.fn.rotate = function(angle,whence) {

var p = this.get(0);

// we store the angle inside the image tag for persistence if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}

if (p.angle >= 0) {
var rotation = Math.PI p.angle / 180;
} else {
var rotation = Math.PI (360+p.angle) / 180;
} var costheta = Math.cos(rotation); var sintheta = Math.sin(rotation);

if (document.all && !window.opera) {
var canvas = document.createElement('img');

canvas.src = p.src; canvas.height = p.height; canvas.width = p.width;

canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod?='auto expand')";

} else {

$('body').append($(document.createElement('canvas')).attr('id','canvas'));
var canvas = document.getElementById('canvas');

canvas.style.width = canvas.width = Math.abs(costheta*p.width) + Math.abs(sintheta*p.height); canvas.style.height = canvas.height = Math.abs(costheta*p.height) + Math.abs(sintheta*p.width);

var context = canvas.getContext('2d'); context.save(); if (rotation <= Math.PI/2) {
context.translate(sintheta*p.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*p.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*p.width,canvas.height);
} else {
context.translate(0,-sintheta*p.width);
} context.rotate(rotation); context.drawImage(p, 0, 0, p.width, p.height); context.restore();

}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);

}

jQuery.fn.rotateRight = function(angle) {

this.rotate(angle==undefined?90:angle);

}

jQuery.fn.rotateLeft = function(angle) {

this.rotate(angle==undefined?-90:-angle);

} ////////////////////////////////////////////////////// File html Test : ///////////////////////////////////////////////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>View Photo</title> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/jquery.rotate.1-1.js"></script> </head> <body> <table> <tr><td align="left"><input type="button" value="<-Rotate" name="RotateL" class="inputSubmit" id="RotateL" onclick="$('#pic').rotateLeft();"><input type="button" class="inputSubmit" value="Rotate->" name="RotateR" id="RotateR" onclick="$('#pic').rotateRight();"></td></tr> </table> <p> <img border="0" width='300' height='230' src="images/mustang.jpg" name="pic" id="pic">

</p>

</body> </html>

Comment by abobjects, Oct 10, 2008

It is not working in firefox. say image size is 600 X 600 , and my image has size 200 X 200, then it shwows full image in firefox after first rotation Please fix this or thow it in dust bin

parvez hakim

Comment by parvez12, Oct 11, 2008

By Parvez Ahmad Hakim

I have fixed it now

jQuery.fn.rotate = function(angle,whence) {

var p = this.get(0);

// we store the angle inside the image tag for persistence if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}

if (p.angle >= 0) {
var rotation = Math.PI p.angle / 180;
} else {
var rotation = Math.PI (360+p.angle) / 180;
} var costheta = Math.cos(rotation); var sintheta = Math.sin(rotation);

if (document.all && !window.opera) {
var canvas = document.createElement('img');

canvas.src = p.src; canvas.height = p.height; canvas.width = p.width;

canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod?='auto expand')";

} else {
var canvas = document.createElement('canvas'); if (!p.oImage) {
canvas.oImage = new Image();

//canvas.oImage.width = p.width + "px"; //# Parvez //canvas.oImage.height = p.height + "px";//# Parvez

canvas.style.width = p.width; //# Parvez canvas.style.height = p.height ;//# Parvez

canvas.oImage.src = p.src; canvas.oImage.width = canvas.width = p.width;
canvas.oImage.height = canvas.height = p.height;

//alert("Hello" + p.height);

//canvas.width = p.width;

} else {
canvas.oImage = p.oImage; //alert("Bye"); //canvas.style.width = canvas.width = 300;
//canvas.style.height = canvas.height = 250;
}

canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

var context = canvas.getContext('2d'); context.save(); if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
} context.rotate(rotation); context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); context.restore();

} canvas.id = p.id; canvas.angle = p.angle; p.parentNode.replaceChild(canvas, p);

}

jQuery.fn.rotateRight = function(angle) {

this.rotate(angle==undefined?90:angle);

}

jQuery.fn.rotateLeft = function(angle) {

this.rotate(angle==undefined?-90:-angle);

}

Comment by daniel.scrima, Dec 04, 2008

Does the rotated image get its ID reset to something different after the rotate? I'm trying to combine this plugin with the imageTool plugin so I can have rotating as well as zoom. After it rotates tho, it loses the attached imagetool function and throws a null pointer in the browser.

Comment by fadingdust, Jan 19, 2009

I propose this amendment:

jQuery.fn.getAngle = function() {

var p = this.get(0); return p.angle;

}

Comment by aalaap, Apr 27, 2009

Just wanted to mention that it works fine in Google Chrome 2.x

Comment by s...@beaver6813.com, May 20, 2009

The code below provides an animated effect that smoothly goes to each 90 degrees (this can be changed by editing the mrrotate function).

A demo can be seen here: http://www.beaver6813.com/dev/jqueryrotate/

The angle provided in by the rotate left and right functions defines how many it will jump each time, by default it is 2, set it to 1 and it will make it move slower, 3 will make it move faster for example.

Enjoy!

var rotationindicator = 0;

jQuery.fn.rotate = function(angle,whence) {

var p = this.get(0);

// we store the angle inside the image tag for persistence if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}

if (p.angle >= 0) {
var rotation = Math.PI p.angle / 180;
} else {
var rotation = Math.PI (360+p.angle) / 180;
} var costheta = Math.cos(rotation); var sintheta = Math.sin(rotation); rotationindicator = p.angle; if (document.all && !window.opera) {
var canvas = document.createElement('img');

canvas.src = p.src; canvas.height = p.height; canvas.width = p.width;

canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod?='auto expand')";

} else {
var canvas = document.createElement('canvas'); if (!p.oImage) {
canvas.oImage = new Image(); canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}

canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

var context = canvas.getContext('2d'); context.save(); if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
} context.rotate(rotation); context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); context.restore();

} canvas.id = p.id; canvas.angle = p.angle; p.parentNode.replaceChild(canvas, p);

}

jQuery.fn.rotateRight = function(angle) {

mrrotate(this.attr('id'),angle==undefined?2:angle);

} function mrrotate(that, angle)

{
console.log(angle); $('#'+that).rotate(angle); if(rotationindicator%90)
setTimeout(function(){mrrotate(that,angle); that = null; angle = null;},10);
else
return;
}

jQuery.fn.rotateLeft = function(angle) {

mrrotate(this.attr('id'),angle==undefined?-2:-angle);

}

Comment by s...@beaver6813.com, May 20, 2009

Forgot to add, unfortunately this code was unsuitable for my project, the image I wanted to use was too larger and made it extremely laggy, if anyone has any solutions for this please share! :-D

Comment by chrisspen, Jul 23, 2009

The demo works wonderfully in Firefox 3.5 and Safari 4.0. It sort of works in IE7, but the rotation is painfully slow, and the image appears to lose it's anti-aliasing.

Comment by chrisspen, Jul 23, 2009

Have you considered using RaphaelJS for the backend? It's image rotate demo appears to work well in nearly all browsers, since it uses VML for IE, http://raphaeljs.com/image-rotation.html

Comment by j0nm0...@hotmail.com, Oct 14, 2009

I noticed that when I rotated a png with semi-transparent pixels in IE8, the semi-transparent pixel became opaque. I was able to fix the problem by adding another filter, AlphaImageLoader? with its src the image to be rotated and the img a 1x1 transparent png.