js实现图片旋转
1、以下代码适用ie9版本
js代码如下：
function rotate(o,p){
var img = document.getElementById(o);
if(!img || !p) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(p=='right'){
(n==3)? n=0:n++;
}else if(p=='left'){
(n==0)? n=3:n--;
}
img.setAttribute('step',n);
//MSIE
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//HACK FOR MSIE 8
switch(n){
case 0:
img.parentNode.style.height = img.height;
break;
case 1:
img.parentNode.style.height = img.width;
break;
case 2:
img.parentNode.style.height = img.height;
break;
case 3:
img.parentNode.style.height = img.width;
break;
}
//DOM
}else{
var c = document.getElementById('canvas_'+o);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
default :
case 0 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0);
break;
case 1 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -img.height);
break;
case 2 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, -img.height);
break;
case 3 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, 0);
break;
}
}
}
html主要代码如下：
<div id="imgDiv" style="float: left;">
<img id="showImg" onclick="rotate('showImg','right')" style="width:100%; height:100%;" src="${ctx }/pwlp/supervise/supervise/getCaseImgTemplate.ht?id=${id }">
</div>
2、以下代码适用谷歌、ie10、ie11版本
<!DOCTYPE html>
<html>
<head>
<title>图片旋转</title>
<script>
window.onload = function(){
var current = 0;
document.getElementById('showImg').onclick = function(){
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
};
</script>
</head>
<body>
<img id ="showImg" src="">
</body>
3、以下代码即适用ie9也适用谷歌、ie10、ie11版本（先判断浏览器版本再绑定点击事件）
js代码如下：
window.onload = function(){
var current = 0;
document.getElementById('showImg').onclick = function(){
var browserVersion = myBrowser();
if(browserVersion == "IE9"){
rotate("showImg","right");
}else{
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
}
};
function rotate(o,p){
var img = document.getElementById(o);
if(!img || !p) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(p=='right'){
(n==3)? n=0:n++;
}else if(p=='left'){
(n==0)? n=3:n--;
}
img.setAttribute('step',n);
//MSIE
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//HACK FOR MSIE 8
switch(n){
case 0:
img.parentNode.style.height = img.height;
break;
case 1:
img.parentNode.style.height = img.width;
break;
case 2:
img.parentNode.style.height = img.height;
break;
case 3:
img.parentNode.style.height = img.width;
break;
}
//DOM
}else{
var c = document.getElementById('canvas_'+o);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
default :
case 0 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0);
break;
case 1 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -img.height);
break;
case 2 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, -img.height);
break;
case 3 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, 0);
break;
}
}
}
function myBrowser(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
if (userAgent.indexOf("MSIE 6.0") > -1) { return "IE6"; }
if (userAgent.indexOf("MSIE 7.0") > -1) { return "IE7"; }
if (userAgent.indexOf("MSIE 8.0") > -1) { return "IE8"; }
if (userAgent.indexOf("MSIE 9.0") > -1) { return "IE9"; }
if (userAgent.indexOf("MSIE 10.0") > -1) { return "IE10"; }
return "IE";
} //判断是否IE6-9浏览器
if (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1 && !isOpera) {
if (userAgent.indexOf("rv:10.0") > -1) { return "IE10"; }
if (userAgent.indexOf("rv:11.0") > -1) { return "IE11"; }
return "IE11";
} //判断是否IE10-11浏览器
else
{
return userAgent;
}
}
html代码如下：
<div id="imgDiv" style="float: left;">
<img id="showImg" style="width:100%; height:100%;" src="${ctx }/pwlp/supervise/supervise/getCaseImgTemplate.ht?id=${id }">
</div>
js实现图片旋转的更多相关文章
- js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...
- 【js】js 让图片旋转
转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...
- rotate.js实现图片旋转 （chrome,IE,firefox都可以实现）
找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- 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实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- net core体系-web应用程序-4net core2.0大白话带你入门-7asp.net core日志组件（Logger和Nlog）
asp.net core日志组件 日志介绍 Logging的使用 1. appsettings.json中Logging的介绍 Logging的配置信息是保存在appsettings.json配置 ...
- 在cron运行hive时，无法打出mapreduce日志
本身我是这么运行的: 15 1 * * * /data/xx/shells/run.sh >> /data/xx/log/joblog/job.log 发现job.log中,没有打出hiv ...
- 做生活的有心人——xxx系统第一阶段总结
2017秋,桃子已经步入大学三年级了,觉得格外幸运 因为现在,有了学习的动力. 如果你和我一样也是在大学中后部分才意识到,自己是个大人了,思维模式开始转变开始融入一些前所未有的认知,觉得自己渺小得如沧 ...
- java定时任务以及Spring使用Quartz调度器执行定时任务
java下的java.util.Timer中类可以实现定时执行任务的执行: 如:让任务立即执行,每隔1s循环执行一次 public class TimerClass { public static v ...
- HDU1029 Ignatius and the Princess IV (水题)
<题目链接> 题目大意:给你一段序列,问你在这个序列中出现次数至少为 (n+1)/2 的数是哪个. 解题分析: 本题是一道水题,如果用map来做的话,就非常简单,但是另一个做法还比较巧妙. ...
- Linux学习之日志管理(二十一)
Linux学习之日志管理 目录 日志管理 日志服务 rsyslogd的新特点 启动日志服务 常见日志的作用 日志文件的一般格式 rsyslogd日志服务 /etc/rsyslog.conf配置文件 服 ...
- f5到底刷新了点什么，你知道吗
引言 前面翻到了http缓存相关内容,关于强制缓存和协商缓存,他们之间的差别可能大家比较清楚. 并且常规情况下是否该使用缓存以及使用哪种缓存, 相关文章多且全,这里不再赘述. 不过用户的不同行为会打破 ...
- python开发之虚拟环境管理：virtualenv、virtualenvwrapper、pycharm
1 引言 进行Python开发时,多个项目可能使用到不同的依赖,例如A项目需要1.8版本的Django,而B项目需要2.0版本的Django,这时候如果没有使用虚拟环境,就需要来回卸载和安装Djang ...
- 上海市2019年公务员录用考试笔试合格人员笔试成绩(A类)
考试类别:A类 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 注册编号 总成绩 4016574 127.4 5112479 145.9 5125732 124.3 5141074 159.9 ...
- linux 学习笔记 rpm命令
软件包管理 用rpm命令来管理rpm 软件包 1>遵循GPL 规则 2>安装 foo-2.0-1.i386.rpm软件包 #rpm -ivh foo-1.0-1.i386.rpm 3> ...