最近突然想研究一下 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
更多 HTML 知识请关注 HTML 中文网 HTML 教程 https://www.html.cn/web/html/ 栏目.
来源: http://www.css88.com/web/html/17147.html