JavaScript Image Rotator
Tuesday, March 9, 2010 2:40Posted in category JavaScript
We 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
<html>
<head>
<!--
**** Universal JavaScript Image Rotator v1.1 (16-03-2009)
//-->
<script type="text/javascript">
<!--
//******************** Image parameters *******************
imagename='kk.jpg'
xsize=180
ysize=240
//*********** 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>
</body>
</html>
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
WP Themes says:
March 14th, 2010 at 12:52 am
Genial post and this enter helped me alot in my college assignement. Gratefulness you for your information.