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: 
                    imgimg.parentNode.style.height = img.height; 
                    break; 
                case 1: 
                    imgimg.parentNode.style.height = img.width; 
                    break; 
                case 2: 
                    imgimg.parentNode.style.height = img.height; 
                    break; 
                case 3: 
                    imgimg.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: 
                    imgimg.parentNode.style.height = img.height; 
                    break; 
                case 1: 
                    imgimg.parentNode.style.height = img.width; 
                    break; 
                case 2: 
                    imgimg.parentNode.style.height = img.height; 
                    break; 
                case 3: 
                    imgimg.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>

猜你喜欢