JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
- JQuery插件让图片旋转任意角度且代码极其简单
- 2012-04-01 09:57:03 我来说两句
- 收藏 我要投稿
-
引入下方的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:
[javascript]
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);
}
转载于:https://www.cnblogs.com/xiaoleidiv/p/3191607.html
JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友相关推荐
- JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
- html图片旋转任意角度,将图像快速旋转任意角度 - jixu2008的日志 - VB爱好者乐园(VBGood) - Powered by Discuz!...
' '下面是窗体代码,在 VB6 调试通过 '需在窗体放置以下 6 个控件,所有控件不必设置任何属性(包括位置和大小),全部采用默认设置: ' Command1.Command2.Label1.P ...
- opencv图片旋转关于中心旋转任意角度与坐标转换
如下例子,实现图片关于中心旋转任意角度,及坐标变换 import os import os.path import cv2 import numpy as np from math import co ...
- C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
- PDF任意页旋转任意角度
使用软件:Adobe Acrobat Pro DC.Enfocus PitStop Pro插件 1.打开PDF文件 2.在左侧选中右键可以旋转固定角度 3.如果要旋转任意角度,Alt+Ctrl+G ...
- c++实现图像旋转任意角度
图形图像处理-之-任意角度的高质量的快速的图像旋转 上篇 纯软件的任意角度的快速旋转 HouSisong@GMail.com 200 ...
- matlab控制三角形绕原点旋转任意角度
项目中遇到一个问题,需要把正三角形绕原点旋转任意角度,平时操作图片的时候,顺便旋转,感觉好像很简单,但是自己去做的时候还是有些困难. 我觉得旋转的难点在于由原始点计算新的目标点上,因为你需要考虑点位于 ...
- iOS开发 CGAffineTransform 让图片旋转, 旋转后获得图片旋转的角度
1.让图片旋转 UIImageView *imageView = [[UIImageView alloc]init]; imageView.frame = CGRectMake(50, 50, 200 ...
- 利用Matlab将任意曲线旋转任意角度
利用Matlab将任意曲线旋转任意角度 公式计算 数据 matlab代码 结果 公式计算 对于如上图所示的任意曲线,需要绕固定点O旋转某一角度,取曲线上任意一点A计算旋转后的坐标值. 设OA的长度为L ...
最新文章
- 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
- JS实现网易云轮播效果图
- linux字符设备驱动架构,linux驱动开发--字符设备:cdd_cdev结构中private_data使用
- HTML知识点梳理1
- 杂谈--从基数评估来看问题1
- 【java网络编程】用TCP socket实现多线程图片上传
- 各种java生成word解决方案的优缺点对比
- 计算机与自动化专业有哪些学校,全国自动化专业大学排名
- 二次元QQ价值评估网源码
- 继 Swin Transformer 之后,MSRA 开源 Video Swin Transformer,在视频数据集上SOTA
- 关于C语言include尖括号和双引号的对话
- .NET Framework3.0答疑
- 知名笔记本躺枪!苹果首席营销官开喷:小孩用了没出息
- python去重排序_python文本去重并排序
- Oracle文件路径——.dbf与.ora
- [Asp.net]常见数据导入Excel,Excel数据导入数据库解决方案,总有一款适合你!
- xml和TreeView
- 1讲.Cisco模拟器-小凡软件的安装使用(附视频链接)
- android 定时重启手机,有必要定时重启手机吗? 重启后手机会更流畅吗?
- c语言程序ppt课件,c语言ppt课件
热门文章
- 数据分析工具测评!被Excel打过的“耳光”,现在可以还回去了
- Web报表页面如何传递中文参数
- 职称计算机xp系统试题,2020年职称计算机WindowsXP测试题及答案.doc
- linux 连接存储,在Linux中连接和使用云存储的三种途径
- springboot后台怎么获取前端传过来的excel_基于SpringBoot的全自动办公系统源码文档全部免费分享...
- python杨辉三角_python中的部分高级特性
- CUDA 10[Linux]最新 百度云下载[免费]
- [转]一个程序员的哲学思考(关于编程、关于人生)
- 查看自己电脑上某个端口有没有被占用
- AD在原理图中高亮网络的两种方法,altium designer 20