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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
js实现计算器功能
2020/08/10 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
数据管理员的自我评价分享
2013/11/15 职场文书
日语专业个人的求职信
2013/12/03 职场文书
化学教师教学反思
2014/01/17 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014年师德承诺书
2014/05/23 职场文书
民生工作实施方案
2014/05/31 职场文书
工作失职检讨书范文
2015/05/05 职场文书
具结保证书范本
2015/05/11 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
使用Apache Camel表达REST服务的方法
2022/06/10 Servers