Rotating an image in all browsers (canvas in IE?)

Posted by Tom on Stack Overflow See other posts from Stack Overflow or by Tom
Published on 2008-12-13T18:20:46Z Indexed on 2010/04/16 13:33 UTC
Read the original article Hit count: 147

Filed under:

rotate

|

image

|

angle

|

canvas

|

internet-explorer

I finally got to work with canvas only to find out that it is not implemented in IE. I tried explore canvas from google to use it in Internet Explorer, but it's not working for my code (http://uptowar.com/test.php - little bug though that it is not removing the old image when rotating).

So, is there an other way to smoothly rotate an image around it's bottom center angle? Maybe javascript? Or is there a way to do it with IE and canvas anyway?

Edit: Google Chrome also seems to add an ugly border to the canvas example.. there must be an other smooth way?

Edit2: tried a hacky javascript way: it causes mayor lags and corrupts the image (http://uptowar.com/test2.php), anyone knows of a working method?

© Stack Overflow or respective owner

Related posts about rotate

Howto rotate image using jquery rotate plugin?

as seen on Stack Overflow - Search for 'Stack Overflow'
How do you rotate an image using jquery (www.jquery.com) rotate plugin (http://code.google.com/p/jquery-rotate/)? I have tried the following and it doesn't seem to work: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>View Photo</title> <script… >>> More
Font gets enlarged when rotating screen

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I have a new ThinkPad X220 Tablet with Kubuntu 12.04. When I rotate the screen 90° with a script, the fonts of all programs that I open after the rotation have ugly huge fonts. #!/bin/sh # Find the line in "xrandr -q --verbose" output that contains current screen orientation and "strip" out… >>> More
Translate extrinsic rotations to intrinsic rotations ( Euler angles )

as seen on Game Development - Search for 'Game Development'
The problem I have is very frustrating: I am using the Jitter Physics library which gives Quaternion rotations, you can extract the extrinsic rotations but I need intrinsic rotations to rotate in OpenTK (There are other reasons as well so I don't want to make OpenTK use a Matrix) GL.Rotate(xr, 1… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More
Rotate point in rectangle

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a point in a rectangle that I need to rotate an arbitrary degree and find the x y of the point. How can I do this using javascript. Below the x,y would be something like 1,3 and after I pass 90 into the method it will return 3,1. |-------------| | * | | | | … >>> More

Related posts about image

Image anotation (Highlighting parts of an image, Scrubbing an image) using Javascript

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, We are working on an application and would like users to annotate an image. By annotation I mean, the ability to highlight parts of an image. Once the image is highlighted, and submit is clicked, the highlighted attributes (color, area highlighted) are submitted to the server to be stored in… >>> More
How I can add JScroll bar to NavigableImagePanel which is an Image panel with an small navigation vi

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have the following NavigableImagePanel, it is under BSD license and I found it in the web. What I want to do with this panel is as follow: I want to add a JScrollPane to it in order to show images in their full size and let the users to re-center the image using the small navigation panel… >>> More
Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
PHP invalid image's and error handling

as seen on Stack Overflow - Search for 'Stack Overflow'
Using PHP's Image and GD functions you can use the following method to finally output the php image imagepng($image); Sometimes, for whatever reason the image may not be displayed typically the error is not with the image but with the actual php functions not executing successfully. However this… >>> More
apt-get install was interrupted

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I am new to Ubuntu. I got the following lines after an interrupted apt-get install. Running depmod. update-initramfs: deferring update (hook will be called later) Examining /etc/kernel/postinst.d. run-parts: executing /etc/kernel/postinst.d/apt-auto-removal 3.13.0-29-generic /boot/vmlinuz-3.13.0-29-generic run-parts:… >>> More