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对象的property和prototype是什么一种关系
Aug 06 Javascript
javascript 函数使用说明
Apr 07 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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身份证号码检查类实例
2015/06/18 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
require.js的用法详解
2015/10/20 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python getopt详解及简单实例
2016/12/30 Python
基于python socketserver框架全面解析
2017/09/21 Python
简单实现python收发邮件功能
2018/01/05 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
python3字符串输出常见面试题总结
2020/12/01 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
《石榴》教学反思
2014/03/02 职场文书
节约电力资源的建议书
2014/03/12 职场文书
机械专业求职信范文
2014/07/15 职场文书
英语投诉信范文
2015/07/03 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python