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.
6 3160
in ie, can only be done in 90deg increments.
for firefox and opera9, you can use this function i wrote for my image editor: -
function rotate (img, deg) {
-
-
function d2g(g) {
-
var r = g / 360;
-
return Math.PI * (2 * r);
-
}
-
-
var canvas = document.createElement("CANVAS");
-
canvas.setAttribute("width", img.width);
-
canvas.setAttribute("height", img.height);
-
var ctx = canvas.getContext("2d");
-
ctx.rotate(d2g(deg));
-
ctx.drawImage(img, 0, 0, img.width, img.height);
-
return (img.src = canvas.toDataURL());
-
}
-
-
-
//example: (when run from here in firebug it tilts the bytes logo at top of page.)
-
rotate(document.images[0], 45)
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] - 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);
-
}
-
}
[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]
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!
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?
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]
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Nik Coughlin |
last post by:
Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?
The functions need to be fast enough for use in a...
|
by: santel_helvis |
last post by:
Hi All,
Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image
|
by: iwdu15 |
last post by:
hi, im trying to rotate a gdi drawn object on my form with a
keypress....forinstance when i push the down arrow, for it to rotate the
object drawn until the top is down, or if i push the right...
|
by: Samuel Shulman |
last post by:
Is it possible and how to rotate pictures in HTML document
Thank you,
Samuel
|
by: Joey_Stacks |
last post by:
Does anyone know of a scipt that will rotate random div layers on page
refresh? I have a primary content area front and center on my site
homepage, and I'd like to rotate various chunks of html...
|
by: comp.lang.php |
last post by:
Recap:
Using imagerotate within PHP 4.3.9 - PHP 5.2.0 for both XP and Linux,
all using GD2
If you rotate an image 180 degrees, all is fine
If you rotate an image 0 degrees and < 180...
|
by: deshg |
last post by:
Hey everyone how are you all doing?
I am trying to use the imagerotate GD function to place an image on top of another image at an angle. Obviously when it rotates an image it creates a...
|
by: osirus1156 |
last post by:
Okay so I want to rotate an image. However the rotate command is doing nothing. I've tried this with both JPEG and Bitmap images.
I just have a button and a picturebox. When i click the button the...
|
by: Thekid |
last post by:
Hi, I have an image similar to a clock, with numbers and letters going around in a circle. I need to extract the numbers and letters from the image and have them print out in a straight line and in...
|
by: DJRhino |
last post by:
Was curious if anyone else was having this same issue or not....
I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
|
by: Aliciasmith |
last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
|
by: tracyyun |
last post by:
Hello everyone,
I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
|
by: NeoPa |
last post by:
Hello everyone.
I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report).
I know it can be done by selecting :...
|
by: NeoPa |
last post by:
Introduction
For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
|
by: Teri B |
last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course.
0ne-to-many. One course many roles.
Then I created a report based on the Course form and...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM)
Please note that the UK and Europe revert to winter time on...
|
by: nia12 |
last post by:
Hi there,
I am very new to Access so apologies if any of this is obvious/not clear.
I am creating a data collection tool for health care employees to complete. It consists of a number of...
|
by: NeoPa |
last post by:
Introduction
For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
| |