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/ ...
随机推荐
- mysql基础理论
第一节数据库管理系统概述 在www.db-engines.com/en/ 这个网站中可以看到对数据库的排名 数据库分为: 关系型数据库: mysql------mariaDB oracle 非关系型数 ...
- Docker 启动tomcat
docker run -d --name jinrong_beijingbank -p 8081:8081 -v /application/docker_hub/java/pypaltform2018 ...
- IEnumerable 与 IEnumerable<T>
转自:https://blog.csdn.net/qq_21419015/article/details/80495322 IEnumerable 和IEnumerable<T> 接口在 ...
- themeleaf跳转锚链接
<a class="lianjie3" th:href="@{/}+'#requires'"></a>
- poi设置打印页页脚和页数设置
之前在网上搜了很久,也没有搜到具体页脚页数的答案,最后还是在官方api文档上找到了答案: HSSFPrintSetup printSetup = (HSSFPrintSetup) sheet.getP ...
- easyui+themeleaf 分页查询实现
<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <head> &l ...
- idea工具maven生命周期clean,install,package等区别
idea工具maven projects里面有9种生命周期,生命周期是包含在一个项目构建中的一系列有序的阶段. 一.最常用的两种打包方法: 1.clean,package(如果报错,很可能就是jar依 ...
- MongDB-高级
No1: 聚合 聚合(aggregate)主要用于计算数据,类似sql中的sum().avg() ---语法 db.集合名称.aggregate([{管道:{表达式}}]) No2: 管道 管道在Un ...
- poj 3368 Frequent values(经典)【RMQ】
<题目链接> 题目大意: 给你一个长度为n的序列,这个序列每个数都有一个值,接下来进行q次询问,问在指定区间内出现次数最多的数出现了几次. 解题分析: 因为该序列是非降序的,所以该序列中的 ...
- vue笔记-模板,计算属性,class与style,data属性
数据和方法 1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实 ...