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

どの部分が機能しませんか？ –

画像を拡大/縮小することはできますが、画像を正しく中央に配置することはできません。また、画像を回転させなければならない場合、スケーリングとセンタリングは機能しないように見えます。画像が部分的に画面から外れているか、画像のサイズを変更しようとすると表示されません。私はどこにいるのか正確にはわかりません。 – nomaam

サポートするブラウザとバージョンを教えてください。 – Phrogz

<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

@nomaam：提供されたコードは、両方の画像の向きを変更せずに処理する必要があります。どのWebブラウザを使用していますか？ –

ここには[jsfiddle]（http://jsfiddle.net/tnt1/dawmy/1/）のテストがあります。（フレーム分周器を使用したスケール） –

HTML>ウィンドウと画像のサイズに基づいて画像を回転させて拡大/縮小する

答えて

関連する問題