使图片旋转的3种解决方案(如何旋转图片30度)

发布时间：2024-02-27

图片旋转效果的研究最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况

一、图片旋转的方案

1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的。

具体代码为：-moz-transfrom:rotate(deg);-webkit-ransfrom:rotate(deg);上述代码的意思就是将图片顺时针旋转度，其实可以旋转任意的度数。但是支持css3的浏览器只有chrome，firefox3.6 ，safari，ie浏览器是不支持的。那么IE下该怎么处理呢？于是就有了下面的一种方案

2）在IE下通过滤镜来实现旋转

具体代码为：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);这里的rotation 参数可以为0,1,2,3 ，表示的意思就是这些数字乘以后的旋转角度。IE下如果要旋转任意的角度要用到矩阵变换滤镜，我们在日常的使用过程中，大部分使用的是变换的倍数，这里就不讨论任意的角度了。但是还是有问题的，如果非ie浏览器，不支持CSS3，那么如果实现图片的旋转呢，其实canvas也是可以图片旋转的。

3）用canvas来实现图片的旋转

canvas在chrome，firefox，opera等浏览器中均支持，他是有一个基于 JavaScript 的绘图 API，。首先我们来看看怎样利用canvas+JavaScript实现图片的旋转

代码如下：

上述代码首先得到一个canvas对象，然后设置他的高度，开始绘图了。这个改变canvas的中心点和旋转角度，然后将图片画到canvas中去，将其存储起来，然后隐藏之前的图片。这种方法实现还是比较平滑的。

二、各种方案的对比css3的实现方案，不会改变原始图片所占空间的大小的，但是ie下的滤镜会改变图片所占空间的大小。其实ie下也是可以支持canvas的，只需要引用一个canvas的脚本。这个是有google提供的一个。但是这个脚本有点大，没有压缩前有多k我比较建议在ie下使用滤镜来实现，其他的浏览器使用canvas 标签来实现。

推荐整理分享使图片旋转的3种解决方案(如何旋转图片30度)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:图片能旋转怎么制作的呢?,使图片旋转的快捷键,图片旋转的三个要素,将图片设置为旋转动画效果,如何旋转图片30度,如何旋转图片30度,如何旋转图片30度,使图片旋转的快捷键,内容如对您有帮助，希望把文章链接给更多的朋友！

JS两种定义方式的区别、内部原理相信两种方式大家都用过，但未必所有人都知道其区别，内部原理。//方式1functionfunc1(x,y){//yourcode}//方式2varfunc2=function(x,y){//yourcode}方式1是典型的函数

解析URI与URL之间的区别与联系今天在看STRUTS配置的时候，发现一个问题，就是在看配置文件的时候，有时出现URL有时又是URI,让我心生不解，到网上查了一圈，解释都含糊不清，索性

nodeType属性返回被选节点的节点类型介绍节点编号：节点名称：1Element2Attribute3Text4CDATASection5EntityReference6Entity7ProcessingInstrucion8Comment9DocumentDocumentTypeDocumentFragmentNotation