<!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旋转图片
猜你喜欢
转载自www.cnblogs.com/lovellll/p/10207949.html
今日推荐
周排行