I am working on a project where I need to rotate and image to the users' liking then allow them to zoom a bit in and out.

Using jquery.rotate.1-1.js in IE everything works perfectly (how rare) as MS wrote their own rotation tool (progid:DXImageTransform) so the img is rotated and then kept as an image. However looking at the JS I see that if the browser is not IE then a canvas is rendered (i've never really used canvas) which means that once the canvas is drawn with the image rotated I cannot zoom in on the image because if I understand it correctly the canvas doesn't actually hold the information.

I've also attempted CSS3 transforms with my non-IE browser and have everything rotating correctly however when I try and zoom it's using now non-existant div sizes.

Are there any tools out there that allow rotation and then zooming on the client-side? OR Is there a way to rotate an img tag in FF/Chrome/Saf & maintain the rotate image after?

I am working on a project where I need to rotate and image to the users' liking then allow them to zoom a bit in and out.

Using jquery.rotate.1-1.js in IE everything works perfectly (how rare) as MS wrote their own rotation tool (progid:DXImageTransform) so the img is rotated and then kept as an image. However looking at the JS I see that if the browser is not IE then a canvas is rendered (i've never really used canvas) which means that once the canvas is drawn with the image rotated I cannot zoom in on the image because if I understand it correctly the canvas doesn't actually hold the information.

I've also attempted CSS3 transforms with my non-IE browser and have everything rotating correctly however when I try and zoom it's using now non-existant div sizes.

Are there any tools out there that allow rotation and then zooming on the client-side? OR Is there a way to rotate an img tag in FF/Chrome/Saf & maintain the rotate image after?

• javascript
• jquery

5 Answers 5

There are some transform CSS version in all current web browsers. I use the following styles for rotation:

.rotate
{
    -webkit-transform: rotate(-90deg);    /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);       /* Firefox 3.5+ */
    -o-transform: rotate(-90deg);         /* Opera starting with 10.50+ */
    -ms-transform: rotate(-90deg);        /* IE9 */
}
.rotateOldIE
{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
    zoom: 1;
}

If you search for the CSS styles you will find detailed description of any from the above CSS styles and you will find many examples.

You can check this tool [http://css3.mikeplate./][1]

[1]: http://css3.mikeplate./ it will allow you do all transformation and see them on the fly so you can test it on different browsers, it allow zomming and rotating

Try use canvas's toDataURL. The only limitation is that the image has to be on the same site of the running script.

See: http://jsfiddle/ghostoy/ZKj9V/

At the cost of including another library to your application, this can be done easily with Raphaël (http://raphaeljs./). It will use VML on IE<9 and SVG on others.

var paper = Raphael(width, height),
    image = paper.image(src, x, y, w, h);

image.rotate(...);
image.scale(...);

Rotate and zoom can be done in canvas :

drawImage method can be invoked with three different sets of arguments:

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Each of those three can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the image argument.

context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Draws the given image onto the canvas. The arguments are interpreted as follows:

This along with

context . rotate(angle)

can be used for rotation and zooming .