HTML>根据窗口和图像大小旋转和缩放图像

HTML > Rotate and scale an image based on window and image size

本文关键字：图像 旋转 缩放 窗口 gt HTML      更新时间：2023-09-26

我正在使用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;
}

我花了很多天的时间在这上面，因为我只是在学习，但我已经没有办法解决这个问题了。任何帮助都将不胜感激。

谢谢。

<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>
相关文章：