Three solutions for rotating Images

Research on Image Rotation Effect
Recently, I have studied the image rotation function in the project. The following is a summary of the support for slice rotation in various browsers.

I. image rotation plan

1) css3 supports image rotation: supported browsers include chrome, firefox, and opera.

Code:-moz-transfrom: rotate (90deg);-webkit-ransfrom: rotate (90deg );
The code above means that the image is rotated 90 degrees clockwise and can actually be rotated to any degree. But only chrome, firefox3.6, safari, and IE browsers support css3. So IE
What should I do? So we have the following solution:

2) rotating with a filter in IE

Code: filter: progid: DXImageTransform. Microsoft. BasicImage (rotation = 1 );
The rotation Parameter can be 0, 1, 2, and 3, indicating the rotation angle after the number is multiplied by the 90. In IE, If You Want To rotate any angle, you need to use the Matrix Transform filter. In our daily use process,
Most of the changes are multiples of 90. We will not discuss any angle here. But there is still a problem. If it is not an IE browser and does not support CSS3, canvas can also rotate images if it is used to rotate images.

3) Use canvas to rotate Images

Canvas is supported in chrome, firefox, opera, and other browsers. It has a JavaScript-Based Drawing API ,. First, let's take a look at how to use canvas + JavaScript to rotate images.

The Code is as follows:

Copy codeThe Code is as follows:
Var test = function (){
Var canvas = document. getElementById ("result ");
Var oImg = document. getElementById ("Img ");
Canvas. height = 300;
Canvas. width = 200;
Var context = canvas. getContext ("2d ");
Context. save ();
Context. translate (200,0 );
Context. rotate (Math. PI/3 );
Context. Fig (oImg, 0, 0,300,200 );
Context. restore ();
OImg. style. display = "none ";
};

The code above first gets a canvas object, then sets its height, and begins drawing. This changes the center and Rotation Angle of the canvas, then draws the image to the canvas, stores it, and
Hide the previous image. This method is still relatively smooth.

Ii. Comparison of various solutions

Css3 does not change the space occupied by the original image, but the filter in ie changes the space occupied by the image.
Actually, in ie, canvas is supported. You only need to reference a canvas script. This is one provided by google. However, this script is a little large and there are more than 20 k before compression.
I suggest using filters in ie, while using canvas labels in other browsers.