javascript combined with canvas to achieve image rotation effect

  • 2020-06-03 05:52:12
  • OfStack

On weibo, we can rotate the picture from left to right, so that users can enjoy the effect of the picture from different perspectives. This article will show you how to use Javascript in combination with related techniques to achieve image rotation. We use HTML5's canvas tag to rotate the image. For ie6, 7 and 8 browsers that do not support HTML5, we use IE-specific filter effects to rotate the image.

HTML

We put a picture on the page, put two buttons at the top of the picture, and use the onclick event to call the rotate() function to control the image to rotate left and right.


<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')"> To the left </a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')"> To the 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 (), where the parameter obj represents the id of the image object to be rotated, and the parameter arr represents the direction of rotation, fixing two values :left(left) and right(right). We set the variable n to record the top, bottom, left and right four rotation states. The continuous rotation state can be guaranteed when the rotation button is clicked, that is, each rotation is rotated again after the last rotation operation.

For IE browsers, we can use their own filters to achieve the rotation effect. Although we don't recommend using filters, we have to re-use the old one in order to be compatible with the old version of IE.


function rotate(obj,arr){ 
  ... 
  // right IE The browser rotates the filter  
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  //  Write to modern browsers HTML5 Elements are rotated:  canvas 
  }else{ 
    ... 
  } 
} 

In the code, we use ES40en.all to determine if it is IE, and if it is, we use filters, while for modern browsers like firefox and chrome, we use canvas for rotation.


function rotate(obj,arr){ 
  ... 
  //  Write to modern browsers HTML5 Elements are rotated:  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 a different state (top, bottom, left, or right), we use canvas to redraw the image.

Of course, the image rotation effect realization also has a solution, bypassing html5, for different browsers, such as firefox below can be used -ES59en-ES60en: rotate(); webkit - ES63en-ES64en: rotate(); But this is not as good as canvas of html5.

Above is all the content that this article shares to everybody, hope everybody can like.


Related articles: