Altmint Blog » javascript image rotator http://blog.altmint.com Mon, 24 Oct 2011 09:11:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 JavaScript Image Rotator http://blog.altmint.com/javascript-image-rotator http://blog.altmint.com/javascript-image-rotator#comments Tue, 09 Mar 2010 07:40:50 +0000 Kongoti http://blog.altmint.com/?p=16 Continue Reading »]]> 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>
]]> http://blog.altmint.com/javascript-image-rotator/feed 1