使图片旋转的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 相关文章推荐
Javascript访问器属性实例分析
Dec 30 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
js实现下拉框二级联动
2018/12/04 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python 定时修改数据库的示例代码
2018/04/08 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python格式化日期时间操作示例
2018/06/28 Python
实例讲解python中的序列化知识点
2018/10/08 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
简述 Python 的类和对象
2020/08/21 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
js实现弹框效果
2021/03/24 Javascript
创业计划书中要认真思考的问题
2013/12/28 职场文书
项目经理聘任书
2014/03/29 职场文书
义和团口号
2014/06/17 职场文书
艾滋病宣传标语
2014/06/25 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP