<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和火狐下效果不一样,对于比例不规则的图片,要达到满意的效果很难搞。
分享到:
相关推荐
4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...
4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 ...
实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 ...
本文实例为大家分享了vue实现旋转木马动画的具体代码,供大家参考,具体内容如下 图片数量可为任意值都能正常处理 [1-无限个]: <!DOCTYPE html> <html> <head> <title></title> ...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
上传并预览,用户可以任意选择区域,支持头像旋转 2.支持上传成功,js 回调函数 3.无论图片过大还是过小,都可以按照固定大小显示 4.支持亮度,对比度,饱和度修饰 5.支持头像拍照保存 6.支持php,asp,jsp 调用 7....
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将...
6.2.2.2 一个使用Arguments对象接收任意个数参数的例子 6.2.2.3 一个使用Arguments对象模拟函数重载的例子 6.2.3 参数类型匹配--一个利用arguments实现函数重载机制的例子 6.3 函数的调用者和所有者 ...
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法(例如base64加解密、哈希加...
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 ...JS:javascript源文件 JSP:HTML网页,其中包含有对一个Java servlet...