利用HTML5 canvas旋轉圖片

時間 2021-05-17

標籤 html html5 canvas app ide spa code htm 對象 blog 欄目 HTML5 简体版

原文原文鏈接

最近忽然想研究一下js旋轉圖片的功能。對於以前的實現方式，就不先說了。如今HTML5很不錯，主要了解一下HTML5中的圖片旋轉吧。html

實例演示： html5

http://www.imqing.com/demo/rotateImg.htmlcanvas

原理：利用canvas對象來旋轉。app

實現方式：首先建立一個canvas元素，而後把img元素繪入canvas。可是，實際上，這是默認狀況，就是圖片沒旋轉時。若是圖片要旋轉90度的話，就須要先把canvas畫布旋轉90度後再繪圖。ide

描述以下： （內部旋轉原理是這樣的，圖片的座標是從左上角開始計算，向右爲x正方向，向下爲y正方向，在旋轉畫布canvas時，其實是這個座標在旋轉，因此最後繪圖方式不同。當時我還用了picpick來測量旋轉必定角度後起點座標，才知道原來旋轉是這樣的，嘿嘿。）spa

代碼： code

  
  
           
  
  
   
   
            
   
   <body>  
   
   
            
   
       <button onclick="rotateImg('testImg', 'left')">向左旋轉</button>  
   
   
            
   
       <button onclick="rotateImg('testImg', 'right')">向右旋轉</button><br/>  
   
   
            
   
       <img src="./test.jpg" id="testImg"/>  
   
   
            
   
   <script>  
   
   
            
   
       function rotateImg(pid, direction) {  
   
   
            
   
           //最小與最大旋轉方向，圖片旋轉4次後回到原方向  
   
   
            
   
           var min_step = 0;  
   
   
            
   
           var max_step = 3;  
   
   
            
   
           var img = document.getElementById(pid);  
   
   
            
   
           if (img == null)return;  
   
   
            
   
           //img的高度和寬度不能在img元素隱藏後獲取，不然會出錯  
   
   
            
   
           var height = img.height;  
   
   
            
   
           var width = img.width;  
   
   
            
   
           var step = img.getAttribute('step');  
   
   
            
   
           if (step == null) {  
   
   
            
   
               step = min_step;  
   
   
            
   
           }  
   
   
            
   
           if (direction == 'right') {  
   
   
            
   
               step++;  
   
   
            
   
               //旋轉到原位置，即超過最大值  
   
   
            
   
               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);  
   
   
            
   
           }  
   
   
            
   
           //旋轉角度以弧度值爲參數  
   
   
            
   
           var degree = step * 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);  
   
   
            
   
                   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>