Получение значения ширины изображения из JavaScript Функция загрузки изображения - PullRequest
Новая
       6

Получение значения ширины изображения из JavaScript Функция загрузки изображения

0 голосов
/ 06 марта 2020

У меня есть следующее, которое получает ширину данного изображения: 

<!DOCTYPE html>
<html>
<head>
    <title>Image Width</title>
    <script>
        var img = new Image();
        img.onload = function() { 
            alert("Width: " + img.width);
        };
        img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

        // Do something with 'img.width' here, outside the image onload event handler.

    </script>
</head>
<body>
</body>
</html>

Я понимаю, что мне нужно загрузить изображение до получения его ширины, и как получить его ширину от в пределах обработчик события загрузки изображения, но мне очень трудно получить доступ к его ширине из вне обработчика.

Я просто идиот и мне не хватает чего-то очень простого, или это так? более сложный, чем я думаю?

Любая помощь будет наиболее ценной.

С уважением, Стив.

Ответы [ 2 ]

1 голос
/ 06 марта 2020

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

Что за код img.onload = function() {} делает расписание функцию, которая будет вызвана после загрузки изображения. Однако код, который следует за ним, просто выполняется сразу ( синхронно ) после того, как будет выполнено планирование, что наверняка будет предшествовать загрузке изображения.

Следовательно, вам нужно отложить его выполнение до тех пор, пока изображение не будет загружено, и это именно то, для чего предназначен img.onload.

1 голос
/ 06 марта 2020

Проблема, с которой вы сталкиваетесь, заключается в асинхронном программировании. Функция onload будет вызвана механизмом позднее, и программа будет продолжать выполнение.

Существует два варианта:

  1. Если вам нужно значение как можно скорее, вам придется запустить код внутри onload, например: 

    var img = new Image();
img.onload = function() { 
    alert("Width: " + img.width);
    // Do something with 'img.width' here, outside the image onload event handler.
};
img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

  2. Если код, который получит доступ к img.width, произойдет позже, например, после того, как пользователь что-то щелкнет, вы можете сохранить значение и использовать его в другом месте: 

    var width;

var img = new Image();
img.onload = function() { 
    width = img.width;
};
img.src="http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"

function anotherFunction() {
    alert(width);
}
...