使图片旋转的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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 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使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
AngularJS快速入门
2015/04/02 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python中的异常处理简明介绍
2015/04/13 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
电信专业应届生自荐信
2013/09/28 职场文书
会议欢迎标语
2014/06/30 职场文书
创先争优宣传标语
2014/10/08 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
党支部对转正的意见
2015/06/02 职场文书
公司规章制度范本
2015/08/03 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书