js实现图片旋转的三种方法


Posted in Javascript onApril 10, 2014

1 使用jQueryRotate.js实现

示例代码:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#div1 { 
width: 800px; 
height: 600px; 
background-color: #ff0; 
position: absolute; 
} 
.imgRotate { 
width: 100px; 
height: 80px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -40px 0 0 -50px; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input2" type="button" value="btn2"></input> 
</div> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jQueryRotate.js"></script> 
<script type="text/javascript"> 
var num = 0; 
$("#input2").click(function(){ 
num ++; 
$("#img1").rotate(90*num); 
}); 
</script> 
</html>

测试结果:chrome下效果正常,旋转后img对象仍为img对象;ie8下效果正常,但旋转后img对象变为下面对象,由于对象变化,若旋转后仍按原来方法获取img对象,则会报js错误。欲获取image对象,可根据class获取。如果图像旋转后,不进行其它操作,则可用此方法。若进行其它操作,如放大、缩小图像,则此方法实现较复杂。
<span ...> 
<rvml:group class="rvml"...> 
<rvml:image class="rvml".../> 
</rvml:group> 
</span>

2 使用Microsoft提供的Matrix对象

示例代码:

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#div1 { 
width: 800px; 
height: 600px; 
background-color: #ff0; 
position: absolute; 
} 
.imgRotate { 
width: 100px; 
height: 100px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -50px 0 0 -50px; 
} 
#imgRotate { 
width: 100px; 
height: 100px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -50px 0 0 -50px; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input1" type="button" value="btn1"></input> 
</div> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
function rotate(id,angle,whence) { 
var p = document.getElementById(id); // we store the angle inside the image tag for persistence 
if (!whence) { 
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; 
} else { 
p.angle = angle; 
} 
if (p.angle >= 0) { 
var rotation = Math.PI * p.angle / 180; 
} else { 
var rotation = Math.PI * (360+p.angle) / 180; 
} 
var costheta = Math.cos(rotation); 
var sintheta = Math.sin(rotation); 
if (document.all && !window.opera) { 
var canvas = document.createElement('img'); 
canvas.src = p.src; 
canvas.height = p.height; 
canvas.width = p.width; 
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; 
} else { 
var canvas = document.createElement('canvas'); 
if (!p.oImage) { 
canvas.oImage = new Image(); 
canvas.oImage.src = p.src; 
} else { 
canvas.oImage = p.oImage; 
} 
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); 
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); 
var context = canvas.getContext('2d'); 
context.save(); 
if (rotation <= Math.PI/2) { 
context.translate(sintheta*canvas.oImage.height,0); 
} else if (rotation <= Math.PI) { 
context.translate(canvas.width,-costheta*canvas.oImage.height); 
} else if (rotation <= 1.5*Math.PI) { 
context.translate(-costheta*canvas.oImage.width,canvas.height); 
} else { 
context.translate(0,-sintheta*canvas.oImage.width); 
} 
context.rotate(rotation); 
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 
context.restore(); 
} 
canvas.id = p.id; 
canvas.angle = p.angle; 
p.parentNode.replaceChild(canvas, p); 
} 
function rotateRight(id,angle) { 
rotate(id,angle==undefined?90:angle); 
} 
function rotateLeft(id,angle) { 
rotate(id,angle==undefined?-90:-angle); 
} 
$("#input1").click(function(){ 
$("img.imgRotate").attr("id","imgRotate"); 
rotateLeft("imgRotate",90); 
$("#imgRotate").attr("top","50%"); 
$("#imgRotate").attr("left","50%"); 
$("#imgRotate").attr("margin","-50px 0 0 -50px"); 
}); 
</script> 
</html>

测试结果:chrome下效果正常,但旋转后img对象变为canvas对象;ie8下效果正常,旋转后img对象仍为img对象。Matrix()参数较多,使用时需较多计算。

3 使用Microsoft提供的BasicImage对象

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
<img id="image" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input2" type="button" value="btn2"></input> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> 
var num = 0; 
$("#input2").click(function(){ 
num = (num + 1) % 4; 
document.getElementById('image').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+num+')'; 
}); 
</script> 
</html>

测试结果:chrome下不能旋转;ie8下效果正常,旋转后img对象仍为img对象。BasicImage()仅一个参数。

查看这三种方法的代码会发现,本质上是一种解决方案:chrome下使用canvas对象实现,ie8下使用VML或者Matrix()或BasicImage()实现。本人近期改造一个组件:其中涉及到旋转、放大图片,由于jQueryRotate.js在ie8下会生成一个新的对象,导致放大图片前选择图片时,需要进行特殊处理。后决定对chrome、ie8分开处理,chrome下使用jQueryRotate实现,ie8下使用BasicImage()实现,保证了代码的简洁性和可读性。

Javascript 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 #Javascript
常见的原始JS选择器使用方法总结
Apr 09 #Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 #Javascript
You might like
解析PHP可变函数的经典用法
2013/06/20 PHP
php中return的用法实例分析
2015/02/28 PHP
php实现短信发送代码
2015/07/05 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP children()函数讲解
2019/02/03 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
canvas实现钟表效果
2017/02/13 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
C++的几个面试题附答案
2016/08/03 面试题
求职自我推荐信
2014/06/25 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
写给老婆的保证书
2015/02/27 职场文书
公司年夜饭通知
2015/04/25 职场文书
捐书仪式主持词
2015/07/04 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server