<!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>
canvas旋轉圖片
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。