js实现图片旋转

首先还是抱歉忘了原博主谁，不过好东西一定要分享

// 兼容性的旋转,基本上是利用HTML5的canvas实现的，如果是一个相册的预览，
// 则应该在上下一张的点击事件中删除canvas元素，否则只能旋转一张图片
// 这里有个问题需要处理，就是如果图片设置了行内样式的width和height时，
// 旋转后不能显示整张照片,还有就是
function rotate(obj,arr){

var img = document.getElementById(obj);
if(!img || !arr) {
return false;
}
var n = img.getAttribute('step');
if(n == null) {
n=0;
}
if(arr=='left'){
(n==0)? n=3:n--;
}else if(arr=='right'){
(n==3)? n=0:n++;
}
img.setAttribute('step',n);

// 对IE浏览器使用滤镜旋转
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
}
// 对现代浏览器写入HTML5的元素进行旋转： canvas
else{
var c = document.getElementById('canvas_'+obj);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+obj);
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;
};
}
}