jsは写真の回転を実現します

23676 ワード

1、以下のコードはie 9バージョンを適用する.
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; 
            } 
        } 
    } 
)主なコードは以下の通りです.
<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、以下のコードはGoogle、ie 10、ie 11バージョンを適用する.
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、以下のコードはie 9を適用して、Google、ie 10、ie 11バージョンも適用されます(まずブラウザのバージョンを判断してからバインドして事件をクリックします).
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>
 
転載先:https://www.cnblogs.com/henuyuxiang/p/10656415.html