Question

我正在使用HTML / Javascript工作，并且根据窗口大小调整图像大小。图像将占用所有窗口空间，但在调整大小时保持其纵横比。此外，如果窗口大小大于其最长边，则图像将旋转并调整大小。

例如，如果图像比高度更宽，并且窗口大小变得非常高，则图像应该旋转并调整大小以便最大化窗口空间，同时保持图像的纵横比相同。图像也应该在屏幕上居中，这样它在图像的两侧都会有相同的死角。

我无法让它发挥作用。到目前为止，这是我的代码。

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

}

我花了很多天才研究这个问题，但是我对如何解决这个问题的想法已经不多了。任何帮助将非常感激。

感谢。

Answer 1

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

HTML＆gt;根据窗口和图像大小旋转和缩放图像

1 个答案: