canvas旋轉圖片
阿新 • • 發佈：2019-01-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas旋轉圖片</title> <style> * { box-sizing: border-box; } .container { margin: 15px; border: 1px solid rgb(106, 250, 255); padding: 20px; background: #fff; text-align: center; } .img-block { max-width: 400px; background: #eee; padding: 15px; margin: 0 auto 15px auto; } .img { display: block; max-width: 100%; } .btn { padding: 5px 10px; } </style> </head> <body> <div class="container"> <div class="img-block"> <img src="i.jpg" class="img" id="img"> </div> <div class="operate-block"> <button type="button" class="btn" id="rotate_clockwise" onclick="rotateImage('img');">順時針旋轉90度</button> <button type="button" class="btn" id="rotate_anticlockwise">逆時針旋轉90度</button> </div> </div> <script> /* imageId： 需要旋轉的圖片的id； direction： 順時針為1， 逆時針為 - 1； 思路： 1. 獲取需要旋轉圖片image的src； 2. 以此src構建新的圖片物件img； 3. 在img的onload事件中： 1. 建立一個canvas元素， 它的寬和高分別對應img的高和寬（ 因為旋轉90度後， 圖片的寬高正好是之前的高寬） 其中ctx我們可以想象它無限大，注意一點：ctx上繪製的圖形只有位置出現在canvas視窗中時，才能顯示出來 2. 繪製圖片之前， 一定要先將ctx順時針旋轉90度，（ 否則圖片沒有旋轉的效果,因為繪製圖片時的ctx狀態已被儲存下來），但是，繪製出來的圖形效果相當於先繪製，再旋轉 （那到底繪製在哪裡，ctx旋轉90度則正好全部顯示在canvas上？） 我們可以將canvas的（0，0）位置當作一個圓心，而ctx就是圍繞這個圓心旋轉的。 我們倒推一下，image順時針旋轉90度後的形狀，iamge的左下角成了新圖的左上角，且這個左上角位置就在canvas的（0，0）處，ctx旋轉時，這個角應該是不動的 這樣我們只要得出image左上角的座標就是我們需要尋找的ctx繪圖時的起點： 左上角座標（相對canvas來說）應該是(0, -canvas.width); 3.如果ctx不旋轉，那麼繪製出的新圖正好在canvasde正上方，我們是看不見的；當ctx旋轉90度之後，則新圖正好處在canvas視窗中，完美呈現(這裡我們需要想象一下：canvas大小位置固定，它是用來呈現繪製的圖形的視窗；而ctx則是無限大，但是它的起點位置永遠都是相對於canvas視窗的左上角，即ctx就是一個以canvas左上角為圓心，半徑無限大的圓) 4.其他幾個角度，原理一樣 5.如果角度不是90度的倍數時，則繪圖原點就需要使用sin，cos來表示了； */ function rotateImage(imageId, direction) { var image = document.getElementById(imageId); var src = image.src; var img = new Image(); img.src = src; img.onload = function() { var w = this.naturalWidth; var h = this.naturalHeight; var canvas = document.createElement("canvas"); canvas.height = w; canvas.width = h; var ctx = canvas.getContext("2d"); ctx.rotate(Math.PI / 180 * 90); ctx.drawImage(this, 0, -canvas.width); var base = canvas.toDataURL("image/jpeg"); image.src = base; } } </script> </body> </html>