Javascript combined with canvas to achieve image rotation effect_javascript skills

On Weibo, we can rotate pictures left, right, etc., so that users can appreciate the picture effects from different perspectives. This article will use examples to explain to you how to use Javascript and related technologies to achieve the rotation effect of images. We use the HTML5 canvas tag to rotate images. For browsers like IE6, 7, and 8 that do not support HTML5, we use IE's unique filter effects to achieve image rotation.

HTML

We place a picture on the page, place two buttons above the picture, and call the rotate() function through the onclick event to control the picture to rotate left or right.

<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<div id="img"> 
   <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div> 

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 wrote a custom function rotate(), in which the parameter obj represents the id of the image object to be rotated, and the parameter arr represents the direction of rotation, with two fixed values: left (to the left) and right (to the right). We set the variable n to record the four rotation states of up, down, left, and right. When clicking the rotate button, the continuous rotation state can be guaranteed, that is, each rotation is rotated again based on the last rotation operation.

Then, we need to perform different processing according to different browsers. For IE browsers, you can use their unique filters to achieve the rotation effect. Although we do not recommend using filters, in order to be compatible with older versions of IE, We had to return to this old knife.

function rotate(obj,arr){ 
  ... 
  //对IE浏览器使用滤镜旋转 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    ... 
  } 
} 

In the code, we use document.all to determine whether it is an IE browser, and if so, use a filter. For modern browsers such as Firefox and Chrome, we use canvas to achieve the rotation effect.

function rotate(obj,arr){ 
  ... 
  // 对现代浏览器写入HTML5的元素进行旋转： 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(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 the canvas element object and assign the image to the canvas object. When the variable n is in different states (up, down, left, and right directions), the canvas is used to redraw the image.

Of course, there is another solution to achieve the image rotation effect, which is to bypass HTML5 and target different browsers. For example, under Firefox, you can use -moz-transform: rotate(); for webkit, you can use -webkit-transform: rotate (); But this is not as good as the canvas implementation of html5.

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