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; 
            }; 
        } 
    }