canvas旋转图片
<!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>