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

Question

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

3

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

}

我花了很多天时间学习，但是我已经没有想法来解决这个问题了。非常感谢任何帮助。

谢谢。

- nomaam

哪一部分不起作用了？ - Ates Goral

我能够缩放图像，但无法正确居中图像。而且，当图像需要旋转时，缩放和居中似乎不起作用。图像要么部分偏离屏幕，要么在我尝试调整图像大小时根本不出现。我不确定我的错误出在哪里。 - nomaam

您需要支持哪些浏览器及其版本？ - Phrogz

我强烈推荐在http://jsfiddle.net创建一个演示。 - Ates Goral

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tnt-rox · Accepted Answer

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