利用HTML5 canvas旋轉圖片

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

執行個體示範：

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

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

實現方式：首先建立一個canvas元素，然後把img元素繪入canvas。但是，實際上，這是預設情況，就是圖片沒旋轉時。如果圖片要旋轉90度的話，就需要先把canvas畫布旋轉90度後再繪圖。

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

代碼：

 
  <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>

解釋： canvas.width與height就不用解釋了吧，應該。rotate應該也不用吧？關鍵是
drawImage(img, x, y);

其中的x，y是指從哪一點開始畫，因為整個座標系統旋轉了，所以，x，y不一樣，比如step=1，圖片向右旋轉了90度，即座標系旋轉了90度，那麼起始位置應該是
x = 0, y= img.height

其它類似可得。是不是覺得很簡單呢？

請看http://www.imqing.com/blog/wp/2012/09/html5-canvas-rotate-image/

本文出自 “Qing's web” 部落格，請務必保留此出處http://qings.blog.51cto.com/4857138/997998

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More