469,612 Members | 1,578 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

problem with rotate image using javascript

118 100+
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
6 2974
rnd me
427 Expert 256MB
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
swethak
118 100+
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
16,027 Expert Mod 8TB
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
16,027 Expert Mod 8TB
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
swethak
118 100+
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
16,027 Expert Mod 8TB
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.

Similar topics

21 posts views Thread by Nik Coughlin | last post: by
17 posts views Thread by santel_helvis | last post: by
1 post views Thread by iwdu15 | last post: by
8 posts views Thread by Samuel Shulman | last post: by
10 posts views Thread by Joey_Stacks | last post: by
4 posts views Thread by comp.lang.php | last post: by
reply views Thread by devrayhaan | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.