Получить размер изображения после изменения размера JavaScript - PullRequest
Новая
       10

Получить размер изображения после изменения размера JavaScript

0 голосов
/ 07 октября 2011

Я пытаюсь изменить размер изображения на основе массива max-width / max-height.Вот что я придумала до сих пор: 

<html>
<head>
    <title>Image resize test</title>
    <script>
        function createImage(){
            //The max-width/max-height
            var maxDim = [500,500];
            //Create the image
            var img = document.createElement("img");
            img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
            document.body.appendChild(img);
            //Function for resizing an image
            function resize(){
                //resize the image
                var portrait = this.width < this.height;
                this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
                //What is the height? PROBLEM HERE!!!
                console.log(this.height);
            }
            //Is the image loaded already?
            var temp = new Image();
            temp.src = img.src;
            var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
            //Fire the resize function
            if (loaded) resize.call(img);
            else img.addEventListener("load",resize,false);
        }
    </script>
</head>
<body onload="createImage()">
</body>
</html>

Вы сможете запустить этот файл как есть.Он может получить ширину / высоту после загрузки изображения.Но как только вы измените ширину, она все равно записывает старую высоту.Похоже, что единственный браузер, который работает правильно, это Firefox (более новые версии).Все остальные браузеры не обновляют атрибут высоты до завершения загрузки окна.

Кто-нибудь знает исправление для этого?Изображение уже загружено, но оно не отображает правильные размеры.

Ответы [ 3 ]

1 голос
/ 07 октября 2011

Вместо настройки ширины / высоты вы можете попытаться установить image.style.maxWidth / image.style.maxHeight, тогда размер изображения изменится с сохранением соотношения сторон.

0 голосов
/ 07 октября 2011

IE не распознает addEvenetListener, и вы должны обрабатывать его самостоятельно, основываясь на браузере. Возможное решение 

<html>
<head>
    <title>Image resize test</title>
    <script>
        function createImage(){
            //The max-width/max-height
            var maxDim = [500,500];
            //Create the image
            var img = document.createElement("img");
            img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
            document.body.appendChild(img);
            //Function for resizing an image
            function resize(){
                //resize the image
                var portrait = this.width < this.height;
                this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
                //What is the height? PROBLEM HERE!!!
                console.log(this.height);
            }
            //Is the image loaded already?
            var temp = new Image();
            temp.src = img.src;
            var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
            //Fire the resize function
            if (loaded) resize.call(img);
            else{ 
            if(isIE == true) // check here for browser 
            img.onload = resize;
            else
            img.addEventListener("load",resize,false);}
        }
    </script>
</head>
<body onload="createImage()">
</body>
</html>

это будет работать нормально, просто вам нужно передать true или false в isIE в зависимости от браузера, который вы используете

0 голосов
/ 07 октября 2011

Вы еще не изменили height, потому что высота вашего изображения> ширина, сделайте portrait = false;

Когда вы изменяете ширину, в IE8, она будет изменять только ширину, но вchrome изменяет ширину и высоту, я думаю, это зависит от браузера.

Вы можете исправить это как путем изменения высоты, так и вручную.

...