HTML>根據窗口和圖像大小旋轉和縮放圖像

我在HTML/Javascript中工作，並打算根據窗口大小調整圖像大小。圖像將佔用所有窗口空間，但在調整大小時保持其縱橫比。此外，如果窗口大小大於其最長邊，圖像將旋轉並調整大小。例如，如果圖像的寬度大於高度，並且窗口大小變得非常高，則圖像應該旋轉並調整大小，以最大化窗口空間，同時保持圖像的寬高比相同。圖像也應該居中在屏幕上，以便在圖像的任一側具有相同的死角。HTML>根據窗口和圖像大小旋轉和縮放圖像

我無法得到這個工作。這是我的代碼到目前爲止。

<!doctype html> 
<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link href="test.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 

    function resize_canvas(){ 

     var main_canvas=document.getElementById("test"); 
     var cxt=main_canvas.getContext("2d"); 
     var img=new Image(); 

     var ratio = 1; 
     var changed = 1; 
     var mid = 1;    
     var srcLink = "tall.JPG"; // test with tall and wide pics 

     main_canvas.width = window.innerWidth; 
     main_canvas.height = window.innerHeight; 

     img.src=srcLink; 

     if(window.innerWidth > window.innerHeight){ // if window port is wider than tall 

      changed = window.innerWidth/(img.width/img.height); 


      mid = window.innerHeight/2;    

      img.onload = function() 
      { 

       if (img.width < img.height){ 

       ratio = window.innerHeight/img.height; 
       changed = img.width * ratio;  


       cxt.rotate(90 * Math.PI/180); 

       cxt.drawImage(img, 0, -img.height,changed,window.innerWidth); 


       } else { 

       cxt.drawImage(img,0,mid,window.innerWidth,changed); 
       } 



      } // end img onload call 



     }else{ // if window port is taller than wide 


      ratio = window.innerHeight/img.height; 
      changed = img.width * ratio;  


      mid = window.innerWidth/2;    

      img.onload = function() 
      { 

       if (img.width > img.height){ 

       ratio = window.innerWidth/img.width; 
       changed = img.height * ratio; 


       mid = window.innerHeight/2 - changed/2; 


       cxt.rotate(90 * Math.PI/180); 
       cxt.drawImage(img, 0, -img.height,window.innerHeight,changed); 

       } else { 

       cxt.drawImage(img,mid,0,changed,window.innerHeight); 
       } 



      } // end img on load 


     } // end window size else block 

    } // end resize function 
</script> 


</head> 
<body onload="resize_canvas();" onresize="resize_canvas();"> 

    <canvas id="test"> canvas not supported </canvas> 

</body> 
</html> 


css file 

html, body { 
width: 100%; 
height: 100%; 
margin: 0px; 
} 

#test 
{ 
    width: 100%; height: auto; 

}

我在這度過了許多天，因爲我剛開始學習，但我跑出來的關於如何解決問題的想法。任何幫助將非常感激。

謝謝。

來源

2012-02-05 nomaam

哪部分不起作用？ – 2012-02-05 00:19:18

我可以縮放圖像，但我無法正確定位圖像。另外，當圖像必須旋轉時，縮放和居中似乎不起作用。圖像部分不在屏幕上，或者當我嘗試調整圖像大小時，它只是不顯示。我不確定我的錯誤在哪裏。 – nomaam 2012-02-05 00:32:54

您需要支持哪些瀏覽器和版本？ – Phrogz 2012-02-05 01:36:39

<html> 
    <head> 
     <script type="text/javascript" charset="utf-8"> 
      window.onload = function() { 
       var fitAspectRatio = function(srcWidth, srcHeight, fitWidth, fitHeight) { 
        if(fitHeight > fitWidth) { 
         theta = Math.PI/2; 
         var temp = srcWidth; 
         srcWidth = srcHeight; 
         srcHeight = temp; 
        } else { 
         theta = 0; 
        } 
        var ratio = [fitWidth/srcWidth, fitHeight/srcHeight]; 
        ratio = Math.min(ratio[0], ratio[1]); 
        return { 
         width : srcWidth * ratio, 
         height : srcHeight * ratio, 
         angle : theta 
        }; 
       }; 
       var img = new Image(); 
       img.src = 'tall.JPG'; 

       var canvas = document.getElementById("canvas1"); 
       var ctx = canvas.getContext("2d"); 

       window.onresize = function() { 
        var newsize = fitAspectRatio(img.width, img.height, window.innerWidth, window.innerHeight); 
        canvas.width = window.innerWidth; 
        canvas.height = window.innerHeight; 
        img.centerX = canvas.width/2; 
        img.centerY = canvas.height/2; 
        if(newsize.angle != 0) { 
         ctx.translate(img.centerX, img.centerY); 
         ctx.rotate(newsize.angle); 
         ctx.translate(-img.centerX, -img.centerY); 
         ctx.drawImage(img, (canvas.width - newsize.height)/2, (canvas.height - newsize.width)/2, newsize.height, newsize.width); 
        } else { 
         ctx.drawImage(img, (canvas.width - newsize.width)/2, (canvas.height - newsize.height)/2, newsize.width, newsize.height); 
        } 
       }; 
       window.onresize(); 
      }; 

     </script> 
     <style> 
     body { 
      background: #001; 
     } 
     #canvas1 { 
      position: absolute; 
      top: 0; 
      left: 0; 
      padding: 0; 
      margin: 0; 
     } 
     </style> 
    </head> 
    <body> 
     <canvas id="canvas1"></canvas> 
    </body> 
</html>

來源

2012-02-05 09:34:12

感謝您的好帖子。它適用於寬度比高的圖片。但是，我只是試圖修改它，因此它會處理比它們更寬的圖片。當我反轉「fitHeight> fitWidth」比較時，照片將正常旋轉，但圖像的縮放關閉。 – nomaam 2012-02-05 18:17:28

@nomaam：提供的代碼應該可以在不修改的情況下處理兩個圖像方向。你使用什麼網絡瀏覽器？ – 2012-02-06 08:22:18

這是[jsfiddle]（http://jsfiddle.net/tnt1/dawmy/1/）測試。（使用分幀器進行縮放） – 2012-02-06 08:38:32

HTML>根據窗口和圖像大小旋轉和縮放圖像

回答

相關問題