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体系-网络数据采集（AngleSharp）-1初探
有这么一本Python的书: <<Python 网络数据采集>> 我准备用.NET Core及第三方库实现里面所有的例子. 这是第一部分, 主要使用的是AngleSharp: ...
- Codeforces 781E Andryusha and Nervous Barriers 线段树 单调栈
原文链接https://www.cnblogs.com/zhouzhendong/p/CF781E.html 题目传送门 - CF781E 题意 有一个矩形,宽为 w ,高为 h .一开始会有 w 个 ...
- java.io.File中字段的使用
File.pathSeparator指的是分隔连续多个路径字符串的分隔符,例如:Java -cp test.jar;abc.jar HelloWorld就是指“;” File.separa ...
- 用sql的avg（score）求完平均值后，保存两位小数的方法（用于查询或视图）
查jx_score表的平均值,以哪次考试(testid)和科目分组(courseid) select testid, courseid, round(avg(`jx_score`.`score`),2 ...
- CentOS 7 休眠系统
CentOS 7的电源按钮只有关机和重启两项,但是可以用命令来休眠系统: 重启: $ systemctl reboot 退出系统并停止电源: $ systemctl poweroff 待机: $ sy ...
- Kafka的接口回调 +自定义分区、拦截器
一.接口回调+自定义分区 1.接口回调:在使用消费者的send方法时添加Callback回调 producer.send(new ProducerRecord<String, String> ...
- Android Studio项目生成Jar包
步骤: 1)在module的gradle文件中,将apply plugin:'com.android.application'改为apply plugin:'com.android.library' ...
- 其实我们可以少写点if else和switch
前言 作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂. 不过他强任他强,if-else全搞定,搬就完了.但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就 ...
- Django 学习第四天——Django 模板标签
一.模板标签: 作用:标签在渲染的过程中提供任意的逻辑:例如 if for...in... 等 标签语法:由 {% %} 来定义的:例如:{% tag %}xxx{% endtag %} 常用标签: ...
- Python内存管理以及数据类型
一.内存管理 1.Cpython解释器的垃圾回收机制 什么是垃圾:当一个值身上没有绑定任何变量名(该值的引用计数=0)时,该值就是一个垃圾. Cpython解释器就会自动回收这样的垃圾. #引用计数增 ...