By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,294 Members | 2,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,294 IT Pros & Developers. It's quick & easy.

problem with rotate image using javascript

100+
P: 118
Hi,

I displayed the image taken from database.How to raotate that image using javascript.plz tell that how to start the logic.plz tell that some reference websites.
Jun 17 '08 #1
Share this Question
Share on Google+
6 Replies


rnd me
Expert 100+
P: 427
in ie, can only be done in 90deg increments.

for firefox and opera9, you can use this function i wrote for my image editor:

Expand|Select|Wrap|Line Numbers
  1. function rotate (img, deg) {
  2.  
  3.     function d2g(g) {
  4.         var r = g / 360;
  5.         return Math.PI * (2 * r);
  6.     }
  7.  
  8.     var canvas = document.createElement("CANVAS");
  9.     canvas.setAttribute("width", img.width);
  10.     canvas.setAttribute("height", img.height);
  11.     var ctx = canvas.getContext("2d");
  12.     ctx.rotate(d2g(deg));
  13.     ctx.drawImage(img, 0, 0, img.width, img.height);
  14.     return (img.src  = canvas.toDataURL());
  15. }
  16.  
  17.  
  18. //example: (when run from here in firebug it tilts the bytes logo at top of page.)
  19. rotate(document.images[0], 45)
Jun 17 '08 #2

100+
P: 118
Hi,

i used the below code for rotating the image .It worked but got a script error as

"A script on this is busy or it may stop responding.You can stop the script now or you can contine to see if the script will complete"

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript: Rotate Images</title>
</head>
<body style="background-color: Black">
<form>
<script type="text/javascript" >
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. function rr_getPageXY(r_o)
  2. {
  3. if (rr_n4)
  4. {
  5. r_o.x = r_o.img.x || 0;
  6. r_o.y = r_o.img.y || 0;
  7. }
  8. else
  9. {
  10. var r_p = r_o.img;
  11. r_o.x = r_o.y = 0;
  12. while (r_p)
  13. {
  14. r_o.x += parseInt(r_p.offsetLeft);
  15. r_o.y += parseInt(r_p.offsetTop);
  16. r_p = r_p.offsetParent || null;
  17. }
  18. }
  19. };
  20.  
  21.  
  22. function rr_getDiv(r_x)
  23. {
  24. return (
  25. document.all? document.all[r_x]
  26. : rr_n4? document.layers[r_x]
  27. : document.getElementById? document.getElementById(r_x)
  28. : null
  29. );
  30. }
  31.  
  32.  
  33. function RRObj(r_o, r_ang)
  34. {
  35. this.name = r_o;
  36. this.img = document.images[r_o];
  37. rr_getPageXY(this);
  38. this.w = this.img.width;
  39. this.h = this.img.height;
  40. this.angle = r_ang;
  41. this.htm = '';
  42. for (var r_i = this.h; r_i--;)
  43. {
  44. for (var r_j = this.w; r_j--;)
  45. {
  46. this.htm += '<div id="' + r_o + 'row' + r_i + 'col' + r_j + '"'+
  47. ' style="position:absolute;'+
  48. 'left:' + (this.x+r_j) + 'px;'+
  49. 'top:' + (this.y+r_i) + 'px;'+
  50. 'width:1px;height:1px;'+
  51. (rr_n4? 'clip:rect(0, 1px 1px 0);">' : 'overflow:hidden;">')+
  52. '<div style="position:absolute;'+
  53. 'left:' + (-r_j) + 'px;'+
  54. 'top:' + (-r_i) + 'px;">'+
  55. '<img src="' + this.img.src+ '" '+
  56. 'width="' + this.w + '" height="' + this.h + '">'+
  57. '<\/div><\/div>';
  58. }
  59. }
  60. }
  61.  
  62.  
  63. RRObj.prototype.rotateTo = function(r_ang)
  64. {
  65. this.angle = r_ang;
  66. var r_sin = Math.sin(r_ang = r_ang*Math.PI/180),
  67. r_cos = Math.cos(r_ang),
  68. r_cx = this.w>>1,
  69. r_cy = this.h>>1,
  70. r_o,
  71. r_z = 0;
  72. for (var r_i = this.h; r_i--;)
  73. {
  74. for (var r_j = this.w; r_j--;)
  75. {
  76. r_o = this.pxs[r_z++] || null;
  77. var r_x = r_j-r_cx,
  78. r_y = r_i-r_cy,
  79. r_xrot = Math.round(r_x*r_cos-r_y*r_sin+r_cx),
  80. r_yrot = Math.round(r_x*r_sin+r_y*r_cos+r_cy);
  81. if (rr_n4) r_o.moveTo(this.x+r_xrot, this.y+r_yrot);
  82. else if (r_o)
  83. {
  84. r_o.style.left = (this.x+r_xrot)+rr_px;
  85. r_o.style.top = (this.y+r_yrot)+rr_px;
  86. }
  87. }
  88. }
  89. }
  90.  
  91.  
  92. RRObj.prototype.swapImage = function(r_x)
  93. {
  94. //this.nimg.src = r_x;
  95. };
  96.  
  97.  
  98. function SET_ROTATABLE()
  99. {
  100. var r_a = SET_ROTATABLE.arguments, r_htm = '', r_o;
  101. window.rr_n4 = !!document.layers;
  102. window.rr_px = (rr_n4 || !!(window.opera && !(r_o = document.documentElement || document.body) && !r_o.innerHTML))? '' : 'px';
  103. window.rots = new Array();
  104. for (var r_i = r_a.length-1; r_i > 0; r_i -= 2)
  105. {
  106. r_o = rots[rots.length] = rots[r_a[r_i-1]] = new RRObj(r_a[r_i-1], r_a[r_i]);
  107. r_htm += r_o.htm;
  108. if (rr_n4) r_o.img.src = spacer;
  109. else r_o.img.style.visibility = 'hidden';
  110. }
  111. document.write((rr_n4? '<div style="position:absolute;"><\/div>\n' : '') + r_htm);
  112. for (r_i = rots.length; r_i--;)
  113. {
  114. (r_o = rots[r_i]).pxs = new Array(r_o.w*r_o.h);
  115. for (var r_z = 0, r_j = r_o.h; r_j--;)
  116. {
  117. for (var r_k = r_o.w; r_k--; r_z++)
  118. r_o.pxs[r_z] = rr_getDiv(r_o.name + 'row' + r_j + 'col' + r_k);
  119. }
  120. r_o.rotateTo(r_o.angle);
  121. }
  122. }
[HTML]</script>

<center>
<br />
<table cellpadding="24">
<tr>
<td align="center">
<img id="newImg" src="logo1.jpg" width="60" height="60"/>
</td>
<td>
<tt><a href="javascript:void(0)" onClick="if (window.rots) rots.newImg.rotateTo(parseInt(90));">
Rotate image by left </a></tt>
</tt>
</td>
</tr>
</table>
</center>

<script type="text/javascript">
<!--
SET_ROTATABLE("newImg", 90);
//-->
</script>
</form>
</body>
</html>[/HTML]
Jun 17 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I've merged your threads. Please keep all posts relating to one problem in a single thread. This makes it easier to follow and answer.

In addition to this, please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future. Thanks!
Jun 17 '08 #4

acoder
Expert Mod 15k+
P: 16,027
i used the below code for rotating the image .It worked but got a script error as

"A script on this is busy or it may stop responding.You can stop the script now or you can contine to see if the script will complete"
It seems as if you've got this code from somewhere. Have you changed anything? Where is the code library?
Jun 17 '08 #5

100+
P: 118
Hi

i have a code for rotating image.But it worked for only image width=30 and height=30.And we give width=100 and height=100 it will not work in Firefox.plz tell what's the problem in my code


[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript: Rotate Images</title>
</head>
<body style="background-color: white">
<form>
<script type="text/javascript" >
function rr_getPageXY(r_o)
{
if (rr_n4)
{
r_o.x = r_o.img.x || 0;
r_o.y = r_o.img.y || 0;
}
else
{
var r_p = r_o.img;
r_o.x = r_o.y = 0;
while (r_p)
{
r_o.x += parseInt(r_p.offsetLeft);
r_o.y += parseInt(r_p.offsetTop);
r_p = r_p.offsetParent || null;
}
}
};


function rr_getDiv(r_x)
{
return (
document.all? document.all[r_x]
: rr_n4? document.layers[r_x]
: document.getElementById? document.getElementById(r_x)
: null
);
}


function RRObj(r_o, r_ang)
{
this.name = r_o;
this.img = document.images[r_o];
rr_getPageXY(this);
this.w = this.img.width;
this.h = this.img.height;
this.angle = r_ang;
this.htm = '';
for (var r_i = this.h; r_i--;)
{
for (var r_j = this.w; r_j--;)
{
this.htm += '<div id="' + r_o + 'row' + r_i + 'col' + r_j + '"'+
' style="position:absolute;'+
'left:' + (this.x+r_j) + 'px;'+
'top:' + (this.y+r_i) + 'px;'+
'width:1px;height:1px;'+
(rr_n4? 'clip:rect(0, 1px 1px 0);">' : 'overflow:hidden;">')+
'<div style="position:absolute;'+
'left:' + (-r_j) + 'px;'+
'top:' + (-r_i) + 'px;">'+
'<img src="' + this.img.src+ '" '+
'width="' + this.w + '" height="' + this.h + '">'+
'<\/div><\/div>';
}
}
}


RRObj.prototype.rotateTo = function(r_ang)
{
this.angle = r_ang;
var r_sin = Math.sin(r_ang = r_ang*Math.PI/180),
r_cos = Math.cos(r_ang),
r_cx = this.w>>1,
r_cy = this.h>>1,
r_o,
r_z = 0;
for (var r_i = this.h; r_i--;)
{
for (var r_j = this.w; r_j--;)
{
r_o = this.pxs[r_z++] || null;
var r_x = r_j-r_cx,
r_y = r_i-r_cy,
r_xrot = Math.round(r_x*r_cos-r_y*r_sin+r_cx),
r_yrot = Math.round(r_x*r_sin+r_y*r_cos+r_cy);
if (rr_n4) r_o.moveTo(this.x+r_xrot, this.y+r_yrot);
else if (r_o)
{
r_o.style.left = (this.x+r_xrot)+rr_px;
r_o.style.top = (this.y+r_yrot)+rr_px;
}
}
}
}


RRObj.prototype.swapImage = function(r_x)
{
//this.nimg.src = r_x;
};


function SET_ROTATABLE()
{
var r_a = SET_ROTATABLE.arguments, r_htm = '', r_o;
window.rr_n4 = !!document.layers;
window.rr_px = (rr_n4 || !!(window.opera && !(r_o = document.documentElement || document.body) && !r_o.innerHTML))? '' : 'px';
window.rots = new Array();
for (var r_i = r_a.length-1; r_i > 0; r_i -= 2)
{
r_o = rots[rots.length] = rots[r_a[r_i-1]] = new RRObj(r_a[r_i-1], r_a[r_i]);
r_htm += r_o.htm;
if (rr_n4) r_o.img.src = spacer;
else r_o.img.style.visibility = 'hidden';
}
document.write((rr_n4? '<div style="position:absolute;"><\/div>\n' : '') + r_htm);
for (r_i = rots.length; r_i--;)
{
(r_o = rots[r_i]).pxs = new Array(r_o.w*r_o.h);
for (var r_z = 0, r_j = r_o.h; r_j--;)
{
for (var r_k = r_o.w; r_k--; r_z++)
r_o.pxs[r_z] = rr_getDiv(r_o.name + 'row' + r_j + 'col' + r_k);
}
r_o.rotateTo(r_o.angle);
}
}
</script>

<center>
<br />
<table cellpadding="24">
<tr>
<td align="center">
<img id="newImg" src="furniture11/logo1.jpg" width="100" height="100"/>
</td>
<td>
<tt><a href="javascript:void(0)" onclick="if (window.rots) rots.newImg.rotateTo(parseInt(document.forms[0].A.value));">
Rotate image by angle( </a></tt>
<input name="A" type="text" size="4" value="270">
<tt><a href="javascript:void(0)" onclick="if (window.rots) rots.newImg.rotateTo(parseInt(document.forms[0].A.value));">
) </a></tt>
</td>
</tr>
</table>
</center>

<script type="text/javascript">
<!--
SET_ROTATABLE("newImg", 90);
//-->
</script>
</form>
</body>
</html>[/HTML]
Jun 27 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Merged threads yet again. Also, added code tags yet again! This is the last time I'll ask you nicely: please do not double post your questions, and please use code tags when posting code.
Jun 27 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.