(js / jquery) Rotate an image in FF / Saf / Chrome without a canvas OR Scale a canvas element

Question

I am working on a project where I need to rotate and display the users I like, and then let them increase and decrease a little.

Using jquery.rotate.1-1.js in IE, everything works fine (as rarely) since MS wrote her own rotation tool (progid: DXImageTransform), so img is rotated and then saved as an image. However, looking at JS, I see that if the browser is not IE, a canvas is created (I never used a canvas), which means that after the canvas is drawn with the image rotated, I can’t enlarge the image, because if I correctly understand that the canvas does not actually contain information.

I also tried converting CSS3 with my browser other than IE, and everything rotates correctly, but when trying to scale it using now non-existent div sizes.

Are there any tools that allow you to rotate and then scale on the client side? OR Is there a way to rotate the img tag in FF / Chrome / Saf and support image rotation after?

Answer 1

All existing web browsers have a version of transform CSS. 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 are looking for CSS styles, you will find a detailed description of any of the above CSS styles, and you will find many examples.

Answer 2

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

[1]: http://css3.mikeplate.com/ it will allow you to do all the transformations and see them on the fly so that you can test it in different browsers, it allows zomming and rotation

Answer 3

Try using canvas toDataURL. The only limitation is that the image must be on the same script launch site.

See: http://jsfiddle.net/ghostoy/ZKj9V/

Answer 4

By including another library in your application, this can easily be done with Raphaël (http://raphaeljs.com/). He will use VML for IE <9 and SVG for others.

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

Answer 5

Rotation and scaling can be done in the canvas:

The drawImage method can be called 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 these three can accept either HTMLImageElement, HTMLCanvasElement, or 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 this image on canvas. The arguments are interpreted as follows:

This together with

 context . rotate(angle) 

can be used for rotation and scaling.