471,863 Members | 1,217 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > problem with rotate image using javascript

Join Bytes to post your question to a community of 471,863 software developers and data experts.

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 3055
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
Rotate, skew, resize for DHTML game
21 posts views Thread by Nik Coughlin | last post: by
How to rotate the image
17 posts views Thread by santel_helvis | last post: by
rotate gdi object
1 post views Thread by iwdu15 | last post: by
Rotate pictueres in html Document
8 posts views Thread by Samuel Shulman | last post: by
Rotate Random Div Layers on Page Refresh?
10 posts views Thread by Joey_Stacks | last post: by
PHP
imagerotate problem with PHP 4.3.9 - PHP 5.2.0 using GD2
4 posts views Thread by comp.lang.php | last post: by
NeoPa
Dealing Cards
reply views Thread by NeoPa | last post: by
Markdown-ImageLocalize
reply views Thread by YellowAndGreen | last post: by
aboka
Need hep to loop through excel
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates