JavaScript Image Rotator
Tuesday, March 9, 2010 2:40We can rotate the image by angle.here is a source code for it ..( rotate an image by an arbitrary angle, it works in IE7 & FF3
<script type=”text/javascript”>
<!–
//******************** Image parameters *******************
imagename=’example.jpg’
xsize=200
ysize=100
//*********** nothing to configure below this line ********
//–>
</script></head>
<body style=”margin:20px”>
<H1>Universal JavaScript Image Rotator v1.0 (14-03-2009)</H1>
<div id=”container” style=”overflow:hidden”>
<script type=”text/javascript”>
<!–
canvsize=Math.round(Math.sqrt(xsize*xsize+ysize*ysize)); //I need a square canvas for complete rotation
document.write(’<canvas id=canvas width=’+canvsize+’ height=’+canvsize+’></canvas>’)
document.write(’<div id=”canvas2″><img id=im width=’+xsize+’ height=’+ysize+’></div>’)
//–>
</script><script type=”text/javascript”>
<!–
ie=0
var browser=navigator.appName;
if (browser==’Microsoft Internet Explorer’) ie=1;document.getElementById(”container”).style.width=canvsize+’px’
document.getElementById(”container”).style.height=canvsize+’px’
//document.getElementById(”canvas”).style.width=canvsize+’px’
//document.getElementById(”canvas”).style.height=canvsize+’px’
document.getElementById(”canvas2″).style.width=xsize+’px’
document.getElementById(”canvas2″).style.height=ysize+’px’
document.getElementById(”canvas2″).style.marginLeft=(canvsize-xsize)/2+’px’
document.getElementById(”canvas2″).style.marginTop=(canvsize-ysize)/2+’px’var browser=navigator.appName;
if (ie==1) {
document.getElementById(’im’).src=imagename;
var canvas2=document.getElementById(’canvas2′);
canvas2.style.filter=”progid:DXImageTransform.Microsoft.Matrix(M11=’1.0′, sizingmethod=’auto expand’)”;
}
else {
var canvas = document.getElementById(’canvas’);
var ctx = canvas.getContext(’2d’);
var img1 = new Image();
img1.src = imagename;
img1.onload=function() { ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);}
}function rotate(deg){
rad = deg*Math.PI/180
if (ie==1) rotate_ie(rad,deg)
else rotate_ff(rad)
}function rotate_ff(rad) {
ctx.clearRect(0,0,canvsize,canvsize);
ctx.save();
ctx.translate(canvsize/2,canvsize/2);
ctx.rotate(rad);
ctx.drawImage(img1, -xsize/2, -ysize/2, xsize, ysize);
ctx.restore();
}function rotate_ie(rad)
{
canvas2.filters.item(0).M11 = Math.cos(rad);
canvas2.filters.item(0).M12 = -Math.sin(rad);
canvas2.filters.item(0).M21 = Math.sin(rad);
canvas2.filters.item(0).M22 = Math.cos(rad);
canvas2.style.marginLeft=((canvsize-canvas2.offsetWidth)/2)+’px’
canvas2.style.marginTop=((canvsize-canvas2.offsetHeight)/2)+’px’
}
//–>
</script>
</div><p>
Enter the number of degrees (positive or negative) you want to rotate the image:<BR>
<input type=”text” id=”rotation”>
<input type=”button” value=”Rotate” onclick=”rotate(document.getElementById(’rotation’).value);”>
</p>
