This article mainly introduces JS to achieve the image rotation of the three ways, the need for friends can refer to the following
1 Use Jqueryrotate.js implementation sample code: code as follows: <! DOCTYPE html> <html> <head> <title></title> <style type= "text/ CSS "> #div1 { width:800px; height:600px; background-color: #ff0; position:absolute;& nbsp } . Imgrotate { width:100px; height:80px; position:absolute; top:50%; left:50%;&nb Sp Margin: -40px 0 0-50px; } </style> </head> <body> <div id= "Div1" > <img id= "img1" class= "Imgrotate" src= "logo-yy.gif"/> <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: Chrome under normal effect, After rotating the IMG object is still an IMG object, IE8 under normal effect, but after rotating the IMG object into the following objects, because the object changes, if the rotation is still the original method to get the IMG object, it will report JS error. To get the image object, you can get it based on class. This method is available if the image is rotated and no other action is performed. This method is more complex if you do other things, such as zooming in and out of the image. Code as follows: <span ...> <rvml:group class= "rvml" ...> <rvml:image "class=" .../ > </rvml:group> </span> 2 Use the Matrix object sample code: with Microsoft Code as follows: <! DOCTYPE html> <html> <head> <title></title> <style type= "text/ CSS "> #div1 { width:800px; height:600px; background-color: #ff0; position:absolute;& nbsp } . Imgrotate { width:100px; height:100px; position:absolute; top:50%; left:50%;&n Bsp Margin: -50px 0 0-50px; } #imgRotate { width:100px; height:100px; Position:absolute;&nbs Ptop:50%; left:50%; margin: -50px 0 0-50px; } </style> </head> <body& gt; <div id= "Div1" > <img id= "img1" class= "Imgrotate" src= "logo-yy.gif"/> <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 t AG for persistence if (!whence) { P.angle = ((p.angle==undefined?0:p.angle) + angle)% 360; } else {&nbs P P.angle = angle; } if (p.angle >= 0) { var rotation = Math.PI * p.angle/180; } else {& nbsp var rotation = Math.PI * (360+p.angle)/180; } var Costheta = Math.Cos (rotation); var Sintheta = Math.s In (rotation); if (DoesCument.all &&!window.opera) { var canvas = document.createelement (' img '); CANVAS.SRC = P.SRC; Canvas.height = p.height; canvas.width = p.width; Canvas.style.filter = "Progid:d XImageTransform.Microsoft.Matrix (m11= "+costheta+", m12= "+ (-sintheta) +", m21= "+sintheta+", m22= "+costheta+", sizingmethod= ' Auto expand ') '; } else { var canvas = document.createelement (' canvas '); if (!p.oimage) {& nbsp 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); nbsp 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); } F Unction 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 ", m); $ (" #imgRotate "). attr (" Top "," 50% " ; $ ("#imgRotate"). attr ("left", "50%"); $ ("#imgRotate"). attr("Margin", " -50px 0 0-50px"); }; </script> </html> test results: Chrome works fine, However, after rotation, the IMG object becomes Canvas object, the IE8 effect is normal and the IMG object is still an IMG object after rotation. Matrix () parameters are more, the use of more calculation. 3 Use Microsoft-provided Basicimage object sample code: code 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> <img id=" image "Src=" Logo-yy.gif "/> " <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: chrome cannot rotate ; IE8 the effect is normal, after rotating the IMG object is still an IMG object. Basicimage () is only one parameter. Looking at the three methods of code will find that essentially a solution: Chrome using the Canvas object implementation, IE8 under the use of VML or matrix () or basicimage () implementation. I recently modified a component: which involves rotating, enlarge the picture, because Jqueryrotate.js under IE8 will generate a new object, resulting in the enlarged picture before the selection, need special treatment. After the decision to Chrome, IE8 separate processing, chrome using jqueryrotate implementation, IE8 under the use of basicimage () implementation, to ensure the simplicity of the code 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
