3 solutions to make pictures rotate _ basics

Research on the effect of picture rotation
Recently in the project need to do the rotation function of the picture, I studied. The following is a summary of the image rotation in each browser support

One, the picture rotation scheme

1) CSS3 realize the image rotation function: Supported browsers have Chrome,firefox;opera is not supported.

The specific code is:-moz-transfrom:rotate (90deg);-webkit-ransfrom:rotate (90DEG);
The above code means to rotate the picture clockwise 90 degrees, in fact, you can rotate any degree. But browsers that support CSS3 only chrome,firefox3.6, Safari,ie browsers are not supported. So IE
What should I do with it? So there's one of the following schemes

2 in IE, through the filter to achieve rotation

The specific code is: Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);
Here the rotation parameter can be 0,1,2,3, which means that these numbers are multiplied by the rotation angle of the. ie if you want to rotate any angle to use matrix transform filter, we in the daily use of the process,
Most use a multiple of the transform 90, where no arbitrary angle is discussed. But still has the question, if not IE browser, does not support CSS3, then if realizes the picture the rotation, actually canvas also can the picture rotate.

3) using canvas to realize the rotation of the picture

Canvas is supported in browsers like Chrome,firefox,opera, and he has a JavaScript based drawing API. First let's look at how to use Canvas+javascript to realize the rotation of the picture

The code is as follows:

Copy code code 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.drawimage (oimg, 0, 0, 300, 200);
        Context.restore ();
        oImg.style.display = "None";
};

The code above first gets a canvas object, then sets his height and begins the drawing. This changes the center point and rotation angle of the canvas, then draws the picture into the canvas, stores it, and then
Hides the previous picture. The implementation of this method is still relatively smooth.

Ii. comparison of the various programmes

CSS3 's implementation will not change the size of the original image space, but the filter under IE will change the size of the space occupied by the picture.
In fact, IE can also support canvas, only need to refer to a canvas script. This one is provided by Google. But this script is a bit large, there are more than 20 k before compression
I recommend using the filter under IE, other browsers use the canvas tag to implement.