网页中图片旋转的几种实现方式

Posted 2020-08-03 疯狂的小馒头

网页中图片旋转一般有下面三种常见的实现方式：

一、 ie 滤镜

IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。

浏览器支持： IE5.5+

CSS代码： 

.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }　　

　　

JS代码：

element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";

二、 CSS3 transform

css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

CSS代码：

.rotate{     -ms-transform:rotate(90deg); /* IE 9 */     -moz-transform:rotate(90deg); /* Firefox */     -webkit-transform:rotate(90deg); /* Safari and Chrome */     -o-transform:rotate(90deg); /* Opera */ }

JS代码：

element.style.webkitTransform="rotate(-90deg)" element.style.MozTransform="rotate(-90deg)" element.style.msTransform="rotate(-90deg)" element.style.OTransform="rotate(-90deg)" element.style.transform="rotate(-90deg)";

三、 HTML5 canvas rotate

使用canvas 2d绘图上下文对象的context.rotate(angle)方法，通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点时画布的左上角。角度转换弧度的公式为：弧度 = 角度 * Math.PI / 180。

 

浏览器支持：Chrome 1.0+、Firefox 1.5+、Opera 9.0+、Safari 1.3+ 、IE 9+

JS代码：

context = canvas.getContext("2d") context.rotate(90 * Math.PI / 180); context.drawImage(img, 0, -img.height);