Forum
Notifications
Clear all
Topic starter
Rotating images is not new thing in JavaScript. But, this tutorial will provide something new because we will use canvas in HTML 5. Here, you will learn how to rotate an image in 4 directions (0°, 90°, 180° and 270°/-90°) and the rotated image will be displayed via the canvas while the original image will be hidden. With this you can rotate any type of image (jpg/jpeg, png, gif, and so on)
Demo
You can find the demo here at
http://xhanch.com/rotating-image-with-javascript-and-canvas-in-html-5/
Source code
<html>
<head>
<title>Javascript image rotator</title>
<script type="text/javascript">
function img_rotate(src_id, obj_id, p_deg){
if(document.getElementById(obj_id)){
var o_img = document.getElementById(src_id);
var o_cvs = document.getElementById(obj_id);
var o_cvc = o_cvs.getContext('2d');
switch(p_deg){
default:
case 0:
o_cvs.setAttribute('width', o_img.width);
o_cvs.setAttribute('height', o_img.height);
o_cvc.rotate(p_deg * Math.PI / 180);
o_cvc.drawImage(o_img, 0, 0);
break;
case 90:
o_cvs.setAttribute('width', o_img.height);
o_cvs.setAttribute('height', o_img.width);
o_cvc.rotate(p_deg * Math.PI / 180);
o_cvc.drawImage(o_img, 0, -o_img.height);
break;
case 180:
o_cvs.setAttribute('width', o_img.width);
o_cvs.setAttribute('height', o_img.height);
o_cvc.rotate(p_deg * Math.PI / 180);
o_cvc.drawImage(o_img, -o_img.width, -o_img.height);
break;
case 270:
case -90:
o_cvs.setAttribute('width', o_img.height);
o_cvs.setAttribute('height', o_img.width);
o_cvc.rotate(p_deg * Math.PI / 180);
o_cvc.drawImage(o_img, -o_img.width, 0);
break;
};
}else{
var o_img = document.getElementById(src_id);
switch(p_deg){
default:
case 0:
o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
break;
case 90:
o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
break;
case 180:
o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
break;
case 270:
case -90:
o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
break;
};
};
}
function add_load_event(func){
var oldonload = window.onload;
if (typeof window.onload != 'function')
window.onload = func;
else{
window.onload = function(){
if(oldonload)
oldonload();
func();
}
}
}
add_load_event(function(){
img_rotate('image', 'canvas', 0);
});
</script>
</head>
<body>
<img id="image" src="" http://xhanch.com/wp-content/themes/xhanch-studio/logo.png "" alt="Xhanch.com" style="display:none"/>
<input type="button" value="0°" onclick="img_rotate('image', 'canvas', 0);"/>
<input type="button" value="90°" onclick="img_rotate('image', 'canvas', 90);"/>
<input type="button" value="180°" onclick="img_rotate('image', 'canvas', 180);"/>
<input type="button" value="-90°" onclick="img_rotate('image', 'canvas', -90);"/><br/><br/>
<a href="" http://xhanch.com" ;" target="_blank"><canvas id="canvas"></canvas></a>
</body>
</html>
Posted : 08/05/2011 5:46 pm