<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和火狐下效果不一样，对于比例不规则的图片，要达到满意的效果很难搞。
分享到：
相关推荐
1. **图片旋转**：通过监听鼠标的移动事件，可以实现图片的任意方向旋转。用户只需按住鼠标拖动，图片就能跟随鼠标的移动轨迹旋转。这通常涉及到图像的矩阵变换，通过改变图片的旋转角度来实现。 2. **图片缩放**：...
在这个名为"js 实例（页面弹出窗口、图片倒转等）"的压缩包中，我们能看到一系列实用且有趣的JavaScript特效实现，非常适合开发者们学习和参考。这些实例涵盖了从基本的页面交互到复杂的视觉效果，让我们一一探讨。 ...
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 ...
移动端Vue+Vant的Uploader实现上传、压缩、旋转图片功能，是利用了Vue.js框架结合Vant UI组件库中的Uploader组件来实现的。该功能主要针对移动端用户，提供了便捷的图片上传、压缩及旋转处理。以下是一些相关知识点...
实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 ...
这个"JS图片旋转代码,可以向左,向右90度转动.rar"文件提供了一个基于JavaScript的解决方案，允许用户通过点击来实现图片90度的顺时针或逆时针旋转。以下是对这个知识点的详细讲解： 1. **HTML5 Canvas**: HTML5的...
##### 实例4：图片浏览效果 - **遮罩层**：使用一个矩形作为遮罩层，模拟图片预览窗口。 - **被遮罩层**：在遮罩层下方放置一系列图片。 - **动画效果**：通过移动遮罩层的位置，模拟浏览不同图片的效果。 ##### ...
它支持矩形和圆形裁剪，同时还允许用户在裁剪过程中自由旋转图片，极大地提升了用户体验。在前端开发中，尤其是在需要上传头像或者处理图像的应用场景下，`cropper.js` 是一个非常实用的工具。 1. **基本功能** `...
2. **图片旋转**：支持90度、180度、270度及任意角度的图片旋转。 3. **放大缩小**：用户可以平滑地放大或缩小图片以查看细节或调整裁剪区域。 4. **预览**：在裁剪过程中，可以实时预览裁剪结果。 5. **响应式设计*...
在"jquery特效实例"中，图片特效是不可或缺的一部分。jQuery可以实现图片轮播、图片预加载、鼠标悬停放大等效果。例如，使用`$.each()`遍历图片数组，配合定时器实现自动轮播；利用`hover()`事件处理函数，可以实现...
上传并预览，用户可以任意选择区域，支持头像旋转 2.支持上传成功，js 回调函数 3.无论图片过大还是过小，都可以按照固定大小显示 4.支持亮度，对比度，饱和度修饰 5.支持头像拍照保存 6.支持php，asp，jsp 调用 7....
3. **图片旋转**：可以自由地旋转图片，支持90度、45度等常见角度，也可以自定义旋转角度。 4. **预览与比例锁定**：用户可以预览裁剪结果，并锁定纵横比，确保裁剪后的图片保持原始比例。 5. **事件监听**：提供了...
在本项目中，我们探讨的是如何使用Echarts这个强大的前端数据可视化库来创建一个3D自动旋转的城市地图，其中特定的区域用3D柱图表示。这个解决方案特别适用于展示地域性数据，例如湖南各地区的统计数据，同时用户也...
本项目“wx_sticker”就是这样一个实例，它利用JavaScript技术，为用户提供了图片操作的基本功能，包括贴纸的叠加、删除、单指移动以及通过按住一个角进行的缩放和旋转。虽然这个Demo没有实现完整的边缘判断和使用...
本文实例为大家分享了js轮播图之旋转木马效果的具体代码，供大家参考，具体内容如下 思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换 左旋转：将数组第一个数据删除，然后添加到数组的最后 右旋转：将...
2. 创建实例：在JavaScript中创建Daycaca对象，并指定用于显示图片的canvas元素。 3. 调用方法：使用对象的方法，如compress()进行图片压缩，crop()进行图片裁剪，然后可以通过toDataURL()获取处理后的图片数据URL...
1. **图片裁剪**：用户可以通过鼠标或触控操作选择图片的任意区域进行裁剪，提供自定义的裁剪比例和旋转角度。 2. **图片旋转和翻转**：除了基本的裁剪，Cropper.js还允许用户对图片进行90度旋转和水平/垂直翻转，...
`jCrop` 是由 Andrew Stichbury 开发的开源库，其主要功能是允许用户通过鼠标操作选取图片上的任意区域，并可以获取到选定区域的坐标信息。这个库依赖于 jQuery，因此在使用前需要先引入 jQuery。`jCrop` 支持响应式...