使图片旋转的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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
深入理解js promise chain
2016/05/05 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
js html实现计算器功能
2018/11/13 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python如何配置环境变量详解
2021/05/18 Python