issue 10
(app engine) commented on by sfornengo
- some additional information:
My browser is firefox3.5, the image appears well in the browser (so it is well served
by app engine) but when calling:
$("#img").rotateLeft();
I get the above error.
some additional information:
My browser is firefox3.5, the image appears well in the browser (so it is well served
by app engine) but when calling:
$("#img").rotateLeft();
I get the above error.
Dec 01, 2009
issue 10
(app engine) reported by sfornengo
- I got this error when using with images served dynamically by google app
engine (both in sdk or in production):
Erreur : uncaught exception: [Exception... "Component returned failure
code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
[nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
http://localhost:8000/media/js/jquery/jquery.rotate.js :: anonymous :: line
51" data: no]
I got this error when using with images served dynamically by google app
engine (both in sdk or in production):
Erreur : uncaught exception: [Exception... "Component returned failure
code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
[nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
http://localhost:8000/media/js/jquery/jquery.rotate.js :: anonymous :: line
51" data: no]
Nov 30, 2009
issue 3
(error with firefox ) commented on by cybermatthieu
- Hi,
Your solution made the trick for me. I have 12 images rotated on the load of the page.
If only one image ratated you should check your javascript errors.
Thanks,
Hi,
Your solution made the trick for me. I have 12 images rotated on the load of the page.
If only one image ratated you should check your javascript errors.
Thanks,
Nov 30, 2009
issue 3
(error with firefox ) commented on by s.kimme...@metropolis-ag.de
- Hi,
I tried your jquery.rotate.js and the first rotation is working fine. But when I
rotate the canvas image, the canvas is empty, and the image is gone away.
any ideas why?
Hi,
I tried your jquery.rotate.js and the first rotation is working fine. But when I
rotate the canvas image, the canvas is empty, and the image is gone away.
any ideas why?
Earlier this year
Oct 22, 2009
issue 9
(Problem rotating multiple images) reported by marcioc...@yahoo.com.br
- What steps will reproduce the problem?
1. call the rotate function for more than one image (ex:$('img').rotateLeft
(10);)
2.
3.
What is the expected output? What do you see instead?
All the images in the page should be rotated, but the result is that it
rotates only the first image
What version of the product are you using? On what operating system?
Version 1.1, Windows 7
Please provide any additional information below.
What steps will reproduce the problem?
1. call the rotate function for more than one image (ex:$('img').rotateLeft
(10);)
2.
3.
What is the expected output? What do you see instead?
All the images in the page should be rotated, but the result is that it
rotates only the first image
What version of the product are you using? On what operating system?
Version 1.1, Windows 7
Please provide any additional information below.
Oct 14, 2009
Reference (Reference Manual for jquery-rotate) Wiki page commented on by j0nm0...@hotmail.com
- I noticed that when I rotated a png with semi-transparent pixels in IE8, the semi-transparent pixel became opaque. I was able to fix the problem by adding another filter, AlphaImageLoader with its src the image to be rotated and the img a 1x1 transparent png.
I noticed that when I rotated a png with semi-transparent pixels in IE8, the semi-transparent pixel became opaque. I was able to fix the problem by adding another filter, AlphaImageLoader with its src the image to be rotated and the img a 1x1 transparent png.
Sep 23, 2009
Reference (Reference Manual for jquery-rotate) Wiki page commented on by maxclapton
- I modified some code and it works well with original setting size.
jQuery.fn.rotate = function(w,h,angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.oImage.height = w;
canvas.oImage.width = h;
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(w,h,angle) {
this.rotate(w,h,angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(w,h,angle) {
this.rotate(w,h,angle==undefined?-90:-angle);
}
I modified some code and it works well with original setting size.
jQuery.fn.rotate = function(w,h,angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.oImage.height = w;
canvas.oImage.width = h;
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(w,h,angle) {
this.rotate(w,h,angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(w,h,angle) {
this.rotate(w,h,angle==undefined?-90:-angle);
}
Jul 23, 2009
Reference (Reference Manual for jquery-rotate) Wiki page commented on by chrisspen
- Have you considered using RaphaelJS for the backend? It's image rotate demo appears to work well in nearly all browsers, since it uses VML for IE, http://raphaeljs.com/image-rotation.html
Have you considered using RaphaelJS for the backend? It's image rotate demo appears to work well in nearly all browsers, since it uses VML for IE, http://raphaeljs.com/image-rotation.html
Jul 23, 2009
Reference (Reference Manual for jquery-rotate) Wiki page commented on by chrisspen
- The demo works wonderfully in Firefox 3.5 and Safari 4.0. It sort of works in IE7, but the rotation is painfully slow, and the image appears to lose it's anti-aliasing.
The demo works wonderfully in Firefox 3.5 and Safari 4.0. It sort of works in IE7, but the rotation is painfully slow, and the image appears to lose it's anti-aliasing.
Jul 02, 2009
issue 3
(error with firefox ) commented on by youngestlinton
- This is indeed a bug with jquery rotate and firefox, I suggest the dev changes the
script to what I suggest below.
The problem is that, in firefox only, if the image hasn't been cached, it doesn't
seem to rotate the images, AT ALL! No matter if you add a delay, or even do it using
a function in the "onload" attribute of the image.
After many hours, I came up with a solution.
At the moment line 30 onwards looks like this:
canvas.oImage = new Image();
canvas.oImage.src = p.src;
etc.
Add two lines inbetween this two looking like this:
canvas.oImage.onload = function() {
}
Then move the code from:
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) +
Math.abs(sintheta*canvas.oImage.height);
to:
context.restore();
into this function. This ensures images are properly loaded. I imagine this is a bug
with firefox / canvas. I was preloading the image before running the rotation, but
the canvas seems to ignore that. I'd consider this a pretty major problem. Anyone
visiting my site on firefox for the first time would not see any rotated images and
because of the error a lot of other JS didn't work.
I've attached the updated jquery rotate too. Enjoy!
This is indeed a bug with jquery rotate and firefox, I suggest the dev changes the
script to what I suggest below.
The problem is that, in firefox only, if the image hasn't been cached, it doesn't
seem to rotate the images, AT ALL! No matter if you add a delay, or even do it using
a function in the "onload" attribute of the image.
After many hours, I came up with a solution.
At the moment line 30 onwards looks like this:
canvas.oImage = new Image();
canvas.oImage.src = p.src;
etc.
Add two lines inbetween this two looking like this:
canvas.oImage.onload = function() {
}
Then move the code from:
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) +
Math.abs(sintheta*canvas.oImage.height);
to:
context.restore();
into this function. This ensures images are properly loaded. I imagine this is a bug
with firefox / canvas. I was preloading the image before running the rotation, but
the canvas seems to ignore that. I'd consider this a pretty major problem. Anyone
visiting my site on firefox for the first time would not see any rotated images and
because of the error a lot of other JS didn't work.
I've attached the updated jquery rotate too. Enjoy!
Mar 19, 2009
issue 8
(image show has problem in IE8) reported by crynosure
- see attached. The first is ok in IE6, IE7 and FF, and the second is not ok
in IE8
see attached. The first is ok in IE6, IE7 and FF, and the second is not ok
in IE8
Jan 30, 2009
issue 1
(Not working in Safari) commented on by nunomiguelperalta
- Thanks!! I loved this fix.
What about the Google Chrome? The images are not affected :(
Thanks!! I loved this fix.
What about the Google Chrome? The images are not affected :(
Jan 03, 2009
issue 7
(Is this project being actively maintained?) reported by david.c....@ed.ac.uk
- It appears that there has been no release of the project since May 2007,
and all the project issues remain open. It therefore looks like the project
is no longer being actively maintained. It would be great if the maintainer
could post to say if this is the case or not.
If this is indeed the case, I would propose that someone interested takes
over maintaining the project, and that the project is hosted on jquery.com,
which now has the infrastructure for hosting plugins.
It appears that there has been no release of the project since May 2007,
and all the project issues remain open. It therefore looks like the project
is no longer being actively maintained. It would be great if the maintainer
could post to say if this is the case or not.
If this is indeed the case, I would propose that someone interested takes
over maintaining the project, and that the project is hosted on jquery.com,
which now has the infrastructure for hosting plugins.
Older
Dec 20, 2008
issue 1
(Not working in Safari) commented on by patrick.delanauze.web
- Well, a simple fix for safari would be to use the -webkit-transform: rotate(45deg); property.
Its a 2 line fix
e.g.
} else if ($.browser.safari){
this.css("-webkit-transform", "rotate(" + angle + "deg)");
Reference site:
http://css-tricks.com/css3-clock/
Well, a simple fix for safari would be to use the -webkit-transform: rotate(45deg); property.
Its a 2 line fix
e.g.
} else if ($.browser.safari){
this.css("-webkit-transform", "rotate(" + angle + "deg)");
Reference site:
http://css-tricks.com/css3-clock/
Oct 30, 2008
issue 5
(Rotate functionality only acts on first element in selected ...) commented on by jamie.jamazon
- i fixed this by wrapping everthing up in a $(this).each()
i fixed this by wrapping everthing up in a $(this).each()
Sep 07, 2008
issue 6
(Does not work with PNG's in IE6) reported by nonbreakingspace
- What steps will reproduce the problem?
1.
2.
3.
What is the expected output? What do you see instead?
What version of the product are you using? On what operating system?
Please provide any additional information below.
What steps will reproduce the problem?
1.
2.
3.
What is the expected output? What do you see instead?
What version of the product are you using? On what operating system?
Please provide any additional information below.
Aug 20, 2008
issue 1
(Not working in Safari) commented on by kari...@hotmail.de
- this Javsscript work fine in Mozilla && IE without Problem (Tested)
//
jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix
(M11="+costheta+",M12="+(-sintheta)
+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
$('body').append($(document.createElement('canvas')).attr('id','canvas'));
var canvas = document.getElementById('canvas');
// var canvas = $(canvas);
//oImage = new Image();
//oImage.src = p.src;
canvas.style.width = canvas.width = Math.abs(costheta*p.width) +
Math.abs(sintheta*p.height);
canvas.style.height = canvas.height = Math.abs(costheta*p.height) +
Math.abs(sintheta*p.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*p.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*p.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*p.width,canvas.height);
} else {
context.translate(0,-sintheta*p.width);
}
context.rotate(rotation);
context.drawImage(p, 0, 0, p.width, p.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}
This is a very simple HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
</head>
<body>
<table>
<tr><td align="left"><input type="button" value="<-Rotate" name="RotateL"
class="inputSubmit" id="RotateL" onclick="$('#pic').rotateLeft();"><input
type="button" class="inputSubmit" value="Rotate->" name="RotateR" id="RotateR"
onclick="$('#pic').rotateRight();"></td></tr>
</table>
<p>
<img border="0" width='300' height='230' src="images/mustang.jpg" name="pic"
id="pic">
</p>
</body>
</html>
this Javsscript work fine in Mozilla && IE without Problem (Tested)
//
jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix
(M11="+costheta+",M12="+(-sintheta)
+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
$('body').append($(document.createElement('canvas')).attr('id','canvas'));
var canvas = document.getElementById('canvas');
// var canvas = $(canvas);
//oImage = new Image();
//oImage.src = p.src;
canvas.style.width = canvas.width = Math.abs(costheta*p.width) +
Math.abs(sintheta*p.height);
canvas.style.height = canvas.height = Math.abs(costheta*p.height) +
Math.abs(sintheta*p.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*p.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*p.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*p.width,canvas.height);
} else {
context.translate(0,-sintheta*p.width);
}
context.rotate(rotation);
context.drawImage(p, 0, 0, p.width, p.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}
This is a very simple HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.rotate.1-1.js"></script>
</head>
<body>
<table>
<tr><td align="left"><input type="button" value="<-Rotate" name="RotateL"
class="inputSubmit" id="RotateL" onclick="$('#pic').rotateLeft();"><input
type="button" class="inputSubmit" value="Rotate->" name="RotateR" id="RotateR"
onclick="$('#pic').rotateRight();"></td></tr>
</table>
<p>
<img border="0" width='300' height='230' src="images/mustang.jpg" name="pic"
id="pic">
</p>
</body>
</html>
Aug 20, 2008
issue 5
(Rotate functionality only acts on first element in selected ...) reported by mattcurtis
- What steps will reproduce the problem?
1. Select multiple elements with the $ selector (for instance, $(".myclass")
What is the expected output? What do you see instead?
Since the rotate function only operates on the first element returned, not
all elements in the selected group would rotate.
What version of the product are you using? On what operating system?
1.1, Windows XP, Firefox 3
Please provide any additional information below.
I've attached a revised version of the 1.1 script that iterates through
each item in the collection and performs a rotation on each of them. Feel
free to incorporate this code into the next version.
What steps will reproduce the problem?
1. Select multiple elements with the $ selector (for instance, $(".myclass")
What is the expected output? What do you see instead?
Since the rotate function only operates on the first element returned, not
all elements in the selected group would rotate.
What version of the product are you using? On what operating system?
1.1, Windows XP, Firefox 3
Please provide any additional information below.
I've attached a revised version of the 1.1 script that iterates through
each item in the collection and performs a rotation on each of them. Feel
free to incorporate this code into the next version.
Aug 05, 2008
issue 4
(It is not working with angle other multiple of 90) reported by pathanfiroz
- What steps will reproduce the problem?
1. By changing value of an angle other than mulitple of 90,it is rotating
entire image element.
2. Try this by changing angle at line 60,64 in the source.
What is the expected output? What do you see instead?
Expected output is only image with in the image space should rotate. Here
rotation takes place along with image space.
What version of the product are you using? On what operating system?
Product : jquery.rotate.1-1.js
Operating system : Windows XP
Browser : InternetExplores
Please provide any additional information below.
What steps will reproduce the problem?
1. By changing value of an angle other than mulitple of 90,it is rotating
entire image element.
2. Try this by changing angle at line 60,64 in the source.
What is the expected output? What do you see instead?
Expected output is only image with in the image space should rotate. Here
rotation takes place along with image space.
What version of the product are you using? On what operating system?
Product : jquery.rotate.1-1.js
Operating system : Windows XP
Browser : InternetExplores
Please provide any additional information below.
