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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python3.5的包存放的具体路径
2020/08/16 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
租房协议书样本
2014/08/20 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
新手入门Mysql--概念
2021/06/18 MySQL
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技