Javascript and canvas to achieve image rotation effect _ javascript skills

Image rotation can be said to be an effect, but gradually rotating is not only in the category of visual effects, but also more useful and functional. Sometimes a photo needs to be taken in a horizontal way. When we preview or share it on the web, we need to rotate it. In the past, this operation may be performed by the software, and then the images rotated to the normal angle are published to the web. On Weibo, we can turn left to right and perform other operations on the image so that users can enjoy the image effect from different perspectives. This article will show you how to use Javascript and related technologies to achieve image rotation. We can use the canvas label of HTML5 to rotate images. for IE 6, 7, and 8 browsers that do not support HTML5, we use the filter effect unique to IE to rotate images.

HTML

We place an image on the page, place two buttons above the image, and use the onclick event to call the rotate () function to control the image rotation to the left and right.

Left to right
 
     
 

Javascript

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 have written a custom function rotate (). The obj parameter indicates the id of the image object to be rotated. The arr parameter indicates the orientation of rotation and has two fixed values: left (left) and right (to the right ). We set the Variable n to record the four rotation states of the top, bottom, and left. When you click the rotation button, the constant rotation can be ensured. That is, each rotation is re-rotated based on the previous rotation operation.

Then, we need to perform different processing based on different browsers. for IE browsers, we can use their own filters to achieve the rotation effect, although we do not recommend using filters, however, to be compatible with earlier IE versions, We have to re-operate the old tool.

Function rotate (obj, arr ){... // use a filter to rotate if (document. all) {img. style. filter = 'progid: DXImageTransform. microsoft. basicImage (rotation = '+ n +') '; // rotate the elements written to html5. canvas} else {...}}

In the code, we use document. all to determine whether the browser is Internet Explorer. If so, we use a filter. for modern browsers such as firefox and chrome, we use canvas to achieve the rotation effect.

Function rotate (obj, arr ){... // rotate the elements written into HTML5 by modern browsers: canvas} else {var c = document. getElementById ('canvas _ '+ obj); if (c = null) {img. style. visibility = 'ddn'; 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 (90 * 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 a canvas Element Object and assign the image to the canvas object. When Variable n is in a different state (top, bottom, left, and right), we use canvas to re-draw the image.

Of course, there is also a solution to achieve the image rotation effect, bypassing html5 and targeting different browsers. For example, in firefox, you can use-moz-transform: rotate (); webkit can use-webkit-transform: rotate (), but this is not as good as the html5 canvas implementation.

The above is all the content shared in this article. I hope you will like it.