JavaScript combined with canvas to achieve image rotation effect

The rotation of the picture can be said to be an effect, but the gradual rotation has not only belong to the visual effects of that category, it is more functional, functionality. Photos sometimes need to be taken sideways, and we need to rotate when we preview or share them on the web. In the past, this operation may have been more to the software to complete, and then rotated to the normal angle of the picture published to the web.

On Weibo, we can rotate the picture to the left and turn right, so that the user can appreciate the picture effect from different angles. This article will combine examples to explain how you can use JavaScript to combine related techniques to achieve a picture's rotation effect. We use the HTML5 canvas tag to rotate the picture, and for ie6,7,8 browsers that do not support HTML5, we use IE's unique filter effect to rotate the picture.

Html

We placed a picture on the page, placed two buttons above the picture, and called the Rotate () function through the OnClick event to control the picture to the left and right.

?

1 2 3 4 5 6 7

<div id= "Tool" > <a href= "#" id= "Arr_left" onclick= "rotate (' myimg ', ' left ')" > Leftwards </a> <a href= "#" Id= "Arr_right" onclick= "rotate (' myimg ', ' right ')" > Rightwards </a> </div> <div id= "img" > </div>

Javascript

?

1 2 3 4 5 6 7 8 9 10 11 12-13

function Rotate (obj,arr) {var img = document.getElementById (obj);    if (!img | |!arr) return FALSE;    var n = img.getattribute (' step ');    if (n== null) n=0;    if (arr== ' left ') {(n==0)? n=3:n--;    }else if (arr== ' right ') {(n==3)? n=0:n++;    } img.setattribute (' Step ', N); ...  }

We wrote a custom function rotate (), where parameter obj represents the ID of the picture object to rotate, and the parameter arr represents the direction of rotation, fixing two values: Left and right. We set the variable N in order to record up and down about four kinds of rotation state, click on the Rotation button to ensure the continuous rotation of the state, that is, each rotation is the last rotation after the operation on the basis of the rotation again.

Then, we will be different according to the browser different processing, for IE browser, you can use their unique filters to achieve the rotation effect, although we do not recommend the use of filters, but in order to compatible with the old version of IE, we have to redo this old knife.

?

1 2 3 4 5 6 7 8 9 10

function Rotate (obj,arr) {...//to IE browser use filter to rotate if (document.all) {img.style.filter = ' progid:dximagetransform.    Microsoft.basicimage (rotation= ' + n + ') ';  To rotate the elements of a modern browser writing HTML5: Canvas}else{...} }

In the code, we use document.all to determine whether it is IE browser, if we use filters, and for modern browsers such as Firefox and Chrome, we use canvas to achieve the effect of rotation.

?

1-2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40-41

function rotate (obj,arr) {    ...    //rotates elements that are written to the HTML5 by modern browsers: canvas     }else{      var C = document.getElementById (' canvas_ ' +obj);       if (c== null) {        img.style.visibility = ' hidden ';         img.style.position = ' absolute ';        c = Document.createelement (' canvas ');        c.setattribute ("id", ' canvas_ ' +obj);         img.parentnode.appendchild (c);      }      var Canvascontext = C.getcontext (' 2d ');      switch (n) {        default:        case 0:           c.setattribute (' width ', img.width);          c.setattribute (' height ', img.height);           Canvascontext.rotate (0 * math.pi/180);           Canvascontext.drawimage (IMG, 0, 0);          break;         case 1:          c.setattribute (' Width ', img.height);          c.setattribute (' height ', img.width);           canvascontext.rotate (math.pi/180);           canvascontext.drawimage (IMG, 0,-img.height);           break;        case 2:           c.setattribute (' width ', img.width);           c.setattributE (' height ', img.height);          canvascontext.rotate (180 * Math.PI/ 180);          canvascontext.drawimage (IMG,-img.width,-img.height) ;          break;        case 3:           c.setattribute (' width ', img.height);           c.setattribute (' height ', img.width);           canvascontext.rotate (270 * math.pi/180);           Canvascontext.drawimage (IMG,-img.width, 0);          break;      };    } }

In the code, we create the canvas element object and assign the picture to the canvas object, and when the variable n is in a different state (up or down four directions), use canvas to redraw the image.

Of course, the image of the rotation effect also has a solution, around the HTML5, for different browsers, such as Firefox can be used under the-moz-transform:rotate (); WebKit can be used-webkit-transform:rotate (); But this is not as good as the canvas of HTML5.

The above is the article to share all the content, I hope you can enjoy.