使图片旋转的3种解决方案


Posted in Javascript onNovember 21, 2013

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

一、图片旋转的方案

1)css3实现图片旋转功能:支持的浏览器有chrome,firefox;opera是不支持的。

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

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

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

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

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

代码如下:

var test = function(){
        var canvas = document.getElementById("result");
        var oImg = document.getElementById("Img");        
        canvas.height = 300;
        canvas.width = 200;
        var context = canvas.getContext("2d");
        context.save();
        context.translate(200,0);
        context.rotate(Math.PI/3);
        context.drawImage(oImg, 0, 0, 300, 200);
        context.restore();
        oImg.style.display = "none";
};

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

二、各种方案的对比

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

Javascript 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
js单例模式详解实例
Nov 21 #Javascript
Ajax同步与异步传输的示例代码
Nov 21 #Javascript
jquery与prototype框架的详细对比
Nov 21 #Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 #Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 #Javascript
探讨javascript是不是面向对象的语言
Nov 21 #Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 #Javascript
You might like
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
企业指导教师评语
2014/04/28 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
市场督导岗位职责
2015/04/10 职场文书
学校开除通知书
2015/04/25 职场文书
音乐剧猫观后感
2015/06/04 职场文书