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/ ...
随机推荐
- SSM整合——完全版
1, 2, 3, 4,项目建立好后: 覆盖pom.xml,地址在:https://blog.csdn.net/mark_lirenhe/article/details/80875266 alt+F5= ...
- Spring 实现两种设计模式：工厂模式和单态模式（单例模式）
本文摘自:李刚 著 <轻量级 Java EE企业应用实战 Struts2+Spring+hibernate整合开发> 在Spring 中大量使用的以下两种设计模式:工厂模式和单态模式. 工 ...
- POJ 2029 Get Many Persimmon Trees （模板题）【二维树状数组】
<题目链接> 题目大意: 给你一个H*W的矩阵,再告诉你有n个坐标有点,问你一个w*h的小矩阵最多能够包括多少个点. 解题分析:二维树状数组模板题. #include <cstdio ...
- netty简单NIO模型
首先是使用java原生nio类库编写的例子,开发一套nio框架不简单,所以选择了netty,该例完成后,是netty举例. package com.smkj.netty; public class T ...
- linux 学习笔记 mysql安装总结
1 安装方式 下载2禁制源码安装包 mysql-5.5.27-linux2.6-i686.tar.gz 备注:2禁制额包解压缩后直接就可以使用 不用Make 2 步骤 shell>groupad ...
- node安装及配置之windows版
一.下载地址 https://nodejs.org/zh-cn/download/ https://nodejs.org/zh-cn/download/releases/ 二.安装步骤 1.双击“no ...
- UVA 815 Flooded!
题意:来自:https://blog.csdn.net/lecholin/article/details/70186673 思路: ①数组存每个网格的高度,然后排序,做题时想象为上面的柱状图. ②注意 ...
- 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- js发送邮件 不会调用客户端。
方式三:使用node中nodemail 首先需要安装node的环境,然后安装nodemailer: npm install nodemailer --save npm install nodemail ...
- 英语口语练习系列-C24-杂技-问候语-乡愁
1. 词汇-杂技 acrobatics noun [ U ] UK /ˌæk.rəˈbæt.ɪks/ US /ˌæk.rəˈbæt̬.ɪks/ the skills of an acrobat 杂技 ...