HTML> Поворот и масштабирование изображения в зависимости от размера окна и изображения - PullRequest
Новая
       0

HTML> Поворот и масштабирование изображения в зависимости от размера окна и изображения

3 голосов
/ 05 февраля 2012

Я работаю в 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;

}

Я потратил много дней на это, поскольку я только учусь, но у меня заканчиваются идеи о том, как решить проблему.Любая помощь приветствуется.

Спасибо.

1 Ответ

1 голос
/ 05 февраля 2012 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...