`

任意旋转图片的js实例

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>任意旋转图片</title>
<script type="text/javascript" src="coos.ui.rotate.js"></script>
</head>
<body>
	<div id="inner"><img id="theimage" border="0" src="logo.jpg" /></div>
	<div style="position:absolute;top:235px;height:40px;">
		<input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('theimage',90);">
		<input type="button" value="顺时针Rotate->" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',90);">
		<input type="button" value="顺时针270" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',270);">
	</div>
</body>
</html>

 

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);
}

 

注:有个问题是gif动画图片在火狐下旋转后不会动的,在ie下正常。jpg图片没有问题。

 

图片旋转本身比较容易,但要在固定最大宽高上作旋转比较麻烦,要等比例改变图片的宽高,而且同样的缩放算法在ie和火狐下效果不一样,对于比例不规则的图片,要达到满意的效果很难搞。

 

分享到:
评论
8 楼 cloudgamer 2010-10-07  
我也写过类似的图片旋转效果
还可以翻转和缩放
7 楼 binlaniua 2010-01-31  
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; 

看到这
FF悲剧了~
6 楼 鹤惊昆仑 2010-01-31  
楼主的代码来自jquery-rotate这个插件吧?see:http://code.google.com/p/jquery-rotate/ 。rotate这个函数还应该提供一个回调函数,每次旋转后触发一个事件,用户可以调整相关dom样式。

另外, canvas.oImage = new Image();canvas.oImage.src = p.src; 这两句里面有个隐藏很深的bug--firefox下图片未加载时context.drawImage会报错,应该改成 canvas.oImage = p;
5 楼 sorehead 2010-01-30  
Javaeye搞什么灰机
附件就是下载不了!!!
4 楼 zqding 2010-01-29  
不错的东西,学习一下
3 楼 zdz8207 2010-01-27  
一般用使用到的对象来做检测是最可靠的

你说的没错,基于功能的检测是最可靠的,不过有时候也会有问题,如果有同样的功能但实现方法不一样,返回的值不一样还是不能直接用的,浏览器的判断还是必要的。
要其他浏览器支持document.all估计不太可能,到那个时候估计现在写的代码早就没用了。

图片旋转本身比较容易,但要在固定最大宽高上作旋转比较麻烦,要等比例改变图片的宽高,而且同样的缩放算法在ie和火狐下效果不一样,对于比例不规则的图片,要达到满意的效果很难搞。
2 楼 cuixiping 2010-01-26  
不错。

我之前也写过一个图片360°旋转的动画,代码不知道哪去了。
基本上对于非IE,就是Canvas,对于IE则可以用滤镜或者VML来实现。

楼主判断IE用的是这句
if (document.all && !window.opera) {
我觉得可能不是很好,保不定其他浏览器什么时候也支持document.all了
一般用使用到的对象来做检测是最可靠的,对于本例:
可以检测是否支持style.filter
也可以检测是否支持canvas.getContext
1 楼 jackleaf 2010-01-25  
如果能带有缓动的效果旋转,这就是一个很有动感的特效了。不然动作就有点生硬。但是谢谢你的分享,让我们的思路更加开阔。

相关推荐

    程序天下:JavaScript实例自学手册

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...

    JavaScript网页特效范例宝典源码

    实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 ...

    【JavaScript源代码】vue实现旋转木马动画.docx

     本文实例为大家分享了vue实现旋转木马动画的具体代码,供大家参考,具体内容如下 图片数量可为任意值都能正常处理 [1-无限个]: &lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;   &lt;title&gt;&lt;/title&gt; ...

    JAVA上百实例源码以及开源项目源代码

     util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...

    asp.net 头像上传及预览剪裁实例源码

    上传并预览,用户可以任意选择区域,支持头像旋转 2.支持上传成功,js 回调函数 3.无论图片过大还是过小,都可以按照固定大小显示 4.支持亮度,对比度,饱和度修饰 5.支持头像拍照保存 6.支持php,asp,jsp 调用 7....

    vc++ 开发实例源码包

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    JAVA上百实例源码以及开源项目

     util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...

    js轮播图之旋转木马效果

    本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将...

    JavaScript王者归来part.1 总数2

     6.2.2.2 一个使用Arguments对象接收任意个数参数的例子   6.2.2.3 一个使用Arguments对象模拟函数重载的例子   6.2.3 参数类型匹配--一个利用arguments实现函数重载机制的例子   6.3 函数的调用者和所有者 ...

    vc++ 应用源码包_5

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    vc++ 应用源码包_6

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    vc++ 应用源码包_1

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    vc++ 应用源码包_2

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    vc++ 应用源码包_3

    内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 ...JS:javascript源文件 JSP:HTML网页,其中包含有对一个Java servlet...

Global site tag (gtag.js) - Google Analytics