让图片旋转任意角度及JQuery插件使用介绍


Posted in Javascript onMarch 20, 2013

引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度,
例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中
就是将id为rotate-image的图片旋转45度。

不过,貌似在Chrome中总是不显示。
唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。
解决办法是,把$("#rotate-image").rotate(45);放在
$(window).load(function(){ });中,因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片,坑爹啊。

另外可以更方便的通过调用$("选择器").rotateRight()和$("选择器").rotateLeft()来分别向右旋转90度和向左旋转90度。

jquery.rotate.js:

jQuery.fn.rotate = function(angle,whence) { 
var p = this.get(0); 
// 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.round(Math.cos(rotation) * 1000) / 1000; 
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000; 
//alert(costheta+","+sintheta); 
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); 
} 
jQuery.fn.rotateRight = function(angle) { 
this.rotate(angle==undefined?90:angle); 
} 
jQuery.fn.rotateLeft = function(angle) { 
this.rotate(angle==undefined?-90:-angle); 
}
Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
js计算精度问题小结
Apr 22 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
javascript中[]和{}对象使用介绍
Mar 20 #Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 #Javascript
javascript中注册和移除事件的4种方式
Mar 20 #Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 #Javascript
jQuery实现id模糊查询的小例子
Mar 19 #Javascript
JS文本框不能输入空格验证方法
Mar 19 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP7修改的函数
2021/03/09 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解Angular2 之 结构型指令
2017/06/21 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
爱情检讨书大全
2014/01/21 职场文书
会议简报格式范文
2015/07/20 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android