Home > Developer > Web Develop
Recently suddenly want to study the function of JS rotate picture. For the previous implementation of the way, do not say first. Now HTML5 is very good, the main understanding of HTML5 in the picture rotation bar.
Example Demo:
Http://www.imqing.com/demo/rotateImg.html
principle: Use the Canvas object to rotate.
implementation: first create a canvas element and then draw the IMG element into the canvas. However, in fact, this is the default, when the picture is not rotated. If the picture is rotated 90 degrees, you need to rotate the canvas canvas 90 degrees before drawing.
This is described as follows: (The internal rotation principle is this, the picture coordinates is from the upper left corner to calculate, the right is the x positive direction, the downward is the positive direction of the Y, in the rotation canvas canvas, actually is this coordinates rotates, therefore the final drawing method is different. At that time I also used the Picpick to measure the rotation of a certain angle after the starting point coordinates, just know the original rotation is such, hey. ）
Code:
<body> <button onclick= "rotateimg (' testImg ', ' left ')" > Rotate Left </button> <button onclick= "rotateImg (' testImg ', ' Right ') "> Rotate </button><br/> <script> function rotateimg ( pid, direction) { //min and max rotation direction, Picture rotated 4 times back to original direction var min_step = 0; var max_step = 3; var img = document.getelementbyid (PID); if (img == null) return;  The height and width of the//img cannot be obtained after the IMG element is hidden, or an error will occur var height = img.height; var width = img.width; var step = Img.getattribute (' Step '); if (step == null) { step = min_step; } if (direction == ' right ') { step++; //rotation to the original position, i.e. exceeding the maximum value step > max_step && (Step = min_step); } else { step--; step < min_step && (Step = max_step); } img.setattribute (' Step ', step); var canvas = document.getElementById (' pic_ ' + pid); if (Canvas == null) { img.style.display = ' None '; canVas = document.createelement (' canvas '); canvas.setattribute (' id ', ' pic_ ' + pid); img.parentnode.appendchild (Canvas); } // Rotation angle is the parameter var degree = step * of the Radian value 90 * math.pi / 180; var ctx = canvas.getcontext (' 2d '); switch (STEP) { case 0: canvas.width = width; canvas.height = height; ctx.drawimage (img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate (degree); &Nbsp; ctx.drawimage (img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate (degree); ctx.drawimage (img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; Ctx.rotate (degree); ctx.drawimage (img, -width, 0); break; } } </script> </body>
explanation: canvas.width and height don't have to explain it. Rotate should not do it? The key is drawimage (IMG, x, y);
where x, Y is drawn from one o'clock, because the entire coordinate system is rotated, so, X, Y is different, such as step=1, the picture is rotated 90 degrees to the right, that is, the coordinate system rotates 90 degrees, then the starting position should bex = 0, y= img.height
Other similar available. Does it feel simple?
JS Rotate the image function
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
