js图片旋转
<script type="text/javascript" language="javascript">
function rotate(id, angle, whence) {
var p = document.getElementById(id);
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;
}
//alert(canvas.width)
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);
}
</script>
调用方法:
<div class="content">
<div class="data">
<a href="javascript:void(0)" style="font-weight: bold; text-decoration: none; font-size: 16px;"
onclick="rotateRight('theimage',90);">右转</a>
<a href="javascript:void(0)" style="font-weight: bold; font-size: 16px; text-decoration: none;"
onclick="rotateLeft('theimage',90);">左转</a><br>
<img src="a.jpg" id="theimage" onload="resizeimg(this,this.width,this.height)" width="100%" alt="800×1422" style="cursor: pointer;" />
</a>
<div style="clear: both">
</div>
</div>
</div>
js图片旋转的更多相关文章
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- js实现图片旋转
1.以下代码适用ie9版本 js代码如下: function rotate(o,p){ var img = document.getElementById(o); if(!img || !p) ret ...
- 【js】js 让图片旋转
转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一款实用的viewer.js 图片相册
Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件 ...
随机推荐
- 每天一道LeetCode--409 .Longest Palindrome
Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...
- 《转载》两个activity界面间跳转切换动画效果
1overridePendingTransition Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出 ...
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...
- C#中ToString和Formate格式大全
C#中ToString格式大全 stringstr1 =); //result: 56,789.0 stringstr2 =); //result: 56,789.00 stringstr3 =); ...
- Cocos2d-JS中JavaScript继承
JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...
- OSI参考模型
1.物理层:发送和接收比特.(工作在物理层的集线器) 2.数据链路层:提供数据的物理传输,并处理错误通知.网络拓扑和流浪控制, 数据链路层将报文封装成数据帧,并添加定制的报头,其中包括目标硬件地址, ...
- 用户不在sudoers文件中的解决方法
1.更改/etc/sudoers权限为777 2.修改文件中 root ALL=(ALL) ALL 下方增加 user ALL=(ALL) ALL 3.回复文件/e ...
- 使用tortoisegit管理git 和 权限验证
1 安装Git 2 安装Tortoise 3 在git.oschina 或者 github上创建项目 4 Tortoise配置 TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keyg ...
- Linux下mysql的安装和使用(C语言)
1 mysql的安装 我使用的ubuntu在线安装,非常简单,命令为: sudo apt-get install mysql-client mysql-server 2 mysql命令集合 网络太多了 ...
- jQuery滚动监听插件Waypoints
页面内滚动操作的导航插件Waypoints.它可以让你方便的处理页面滚动事件,你可以比较自由的在自己的UI中使用这个插件控制页面滚动事件. Waypoints根据用户滚动的位置来帮助开发者构建相关的设 ...