使图片旋转的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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
从原生JavaScript到React深入理解
Jul 23 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
操作Oracle的php类
2006/10/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
VUE中的无限循环代码解析
2017/09/22 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python中处理时间的几种方法小结
2015/04/09 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python如何对XML 解析
2020/06/28 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
中软Java笔试题
2012/11/11 面试题
料理师求职信
2014/01/30 职场文书
五四青年节活动总结
2015/02/10 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
php修改word的实例方法
2021/11/17 PHP
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL