让图片旋转任意角度及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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JavaScript 事件系统
Jul 22 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android