Home > Developer > JavaScript
1. Implement using jQueryRotate. js
Sample Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Style type = "text/css">
# Div1 {
Width: 800px;
Height: 600px;
Background-color: # ff0;
Position: absolute;
}
. ImgRotate {
Width: 100px;
Height: 80px;
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-40px 0 0-50px;
}
</Style>
</Head>
<Body>
<Div id = "div1">
<Input id = "input2" type = "button" value = "btn2"> </input>
</Div>
</Body>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript" src = "jQueryRotate. js"> </script>
<Script type = "text/javascript">
Var num = 0;
$ ("# Input2"). click (function (){
Num ++;
$ ("# Img1"). rotate (90 * num );
});
</Script>
</Html>
Test results: the img object in chrome is normal, and the img object is still img object after rotation. The img object in ie8 is normal, but the img object becomes the following object after rotation. Due to the object changes, if the img object is still obtained using the original method after rotation, a js error is reported. You can obtain the image object according to the class. This method is available if no other operations are performed after the image is rotated. If you perform other operations, such as enlarging or downgrading an image, this method is more complicated.
Copy codeThe Code is as follows:
<Span...>
<Rvml: group class = "rvml"...>
<Rvml: image class = "rvml".../>
</Rvml: group>
</Span>
2. Use the Matrix object provided by Microsoft
Sample Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Style type = "text/css">
# Div1 {
Width: 800px;
Height: 600px;
Background-color: # ff0;
Position: absolute;
}
. ImgRotate {
Width: 100px;
Height: 100px;
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-50px 0 0-50px;
}
# ImgRotate {
Width: 100px;
Height: 100px;
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-50px 0 0-50px;
}
</Style>
</Head>
<Body>
<Div id = "div1">
<Input id = "input1" type = "button" value = "btn1"> </input>
</Div>
</Body>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript">
Function rotate (id, angle, whence ){
Var p = document. getElementById (id );
// We store the angle inside the image tag for persistence
If (! Whence ){
P. angle = (p. angle = undefined? 0: p. angle) + angle) % 360;
} Else {
P. angle = angle;
}
If (p. angle> = 0 ){
Var rotation = Math. PI * p. angle/180;
} Else {
Var rotation = Math. PI * (360 + p. angle)/180;
}
Var costheta = Math. cos (rotation );
Var sintheta = Math. sin (rotation );
If (document. all &&! Window. opera ){
Var canvas = document. createElement ('img ');
Canvas. src = p. src;
Canvas. height = p. height;
Canvas. width = p. width;
Canvas. style. filter = "progid: DXImageTransform. microsoft. matrix (M11 = "+ costheta +", M12 = "+ (-sintheta) +", M21 = "+ sintheta +", M22 = "+ costheta + ", sizingMethod = 'Auto expand ')";
} Else {
Var canvas = document. createElement ('canvas ');
If (! P. oImage ){
Canvas. oImage = new Image ();
Canvas. oImage. src = p. src;
} Else {
Canvas. oImage = p. oImage;
}
Canvas. style. width = canvas. width = Math. abs (costheta * canvas. oImage. width) + Math. abs (sintheta * canvas. oImage. height );
Canvas. style. height = canvas. height = Math. abs (costheta * canvas. oImage. height) + Math. abs (sintheta * canvas. oImage. width );
Var context = canvas. getContext ('2d ');
Context. save ();
If (rotation <= Math. PI/2 ){
Context. translate (sintheta * canvas. oImage. height, 0 );
} Else if (rotation <= Math. PI ){
Context. translate (canvas. width,-costheta * canvas. oImage. height );
} Else if (rotation <= 1.5 * Math. PI ){
Context. translate (-costheta * canvas. oImage. width, canvas. height );
} Else {
Context. translate (0,-sintheta * canvas. oImage. width );
}
Context. rotate (rotation );
Context. drawImage (canvas. oImage, 0, 0, canvas. oImage. width, canvas. oImage. height );
Context. restore ();
}
Canvas. id = p. id;
Canvas. angle = p. angle;
P. parentNode. replaceChild (canvas, p );
}
Function rotateRight (id, angle ){
Rotate (id, angle = undefined? 90: angle );
}
Function rotateLeft (id, angle ){
Rotate (id, angle = undefined? -90:-angle );
}
$ ("# Input1"). click (function (){
$ ("Img. imgRotate"). attr ("id", "imgRotate ");
RotateLeft ("imgRotate", 90 );
$ ("# ImgRotate"). attr ("top", "50% ");
$ ("# ImgRotate"). attr ("left", "50% ");
$ ("# ImgRotate"). attr ("margin", "-50px 0 0-50px ");
});
</Script>
</Html>
Test results: the img object in chrome is normal, but the img object changes to the canvas object after rotation. The img object in ie8 is normal, and the img object remains the img object after rotation. There are many Matrix () parameters, and more calculations are required for use.
3. Use the BasicImage object provided by Microsoft
Sample Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</Head>
<Body>
<Input id = "input2" type = "button" value = "btn2"> </input>
</Body>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript">
Var num = 0;
$ ("# Input2"). click (function (){
Num = (num + 1) % 4;
Document. getElementById ('image'). style. filter = 'progid: DXImageTransform. Microsoft. BasicImage (rotation = '+ num + ')';
});
</Script>
</Html>
Test results: the img object cannot be rotated in chrome; the img object can be rotated normally in ie8. BasicImage () is only one parameter.
By checking the code of the three methods, we can find that the code is essentially a solution: using the canvas object in chrome, and using VML, Matrix (), or BasicImage () in ie8. I recently transformed a component, which involves rotating and enlarging images. Because jQueryRotate. js generates a new object under ie8, special processing is required when selecting images before enlarging images. Then we decided to separate chrome and ie8, implement jQueryRotate in chrome, and implement BasicImage () in ie8 to ensure code simplicity and readability.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
