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操纵Cookie实现购物车程序
Feb 15 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 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中基本符号及使用方法
2010/03/23 PHP
浅析PHP Socket技术
2013/08/02 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python del()函数用法
2013/03/24 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python交互界面的退出方法
2019/02/16 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python怎么对数字进行过滤
2020/07/05 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
教师学习培训邀请函
2014/02/04 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
企业整改报告范文
2014/11/08 职场文书
详解python的内存分配机制
2021/05/10 Python
windows安装python超详细图文教程
2021/05/21 Python
Go 中的空白标识符下划线
2022/03/25 Golang