Получите высоту/ширину изображения в Javascript (в идеале без загрузки изображения вообще)

Извините, если на это уже был дан ответ, но я не могу найти его, если это так.

Я хочу найти высоту и ширину файла изображения в Javascript. Мне не нужно показывать изображение на странице, просто высоту и ширину.

В настоящий момент у меня есть следующий код, но он возвращает высоту и ширину 0 (в Mozilla 5).

  var img = new Image();
  img.src = "./filename.jpg";
  var imgHeight = img.height;
  var imgWidth = img.width;
  alert("image height = "  + imgHeight + ", image width = " + imgWidth);

Файл определенно существует, он находится в том же каталоге, что и HTML, и у него нет высоты и ширины 0:)

Что я делаю неправильно?

Ответы

Ответ 1

Если изображение не загружено, у него не будет установлен "высота и ширина". Вам нужно подождать, пока изображение будет полностью загружено, а затем проверьте его размер. Возможно, что-то вроде этого:

function getWidthAndHeight() {
    alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
    return true;
}
function loadFailure() {
    alert("'" + this.name + "' failed to load.");
    return true;
}
var myImage = new Image();
myImage.name = "image.jpg";
myImage.onload = getWidthAndHeight;
myImage.onerror = loadFailure;
myImage.src = "image.jpg";

Ответ 2

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

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

Существует JSFiddle Demo.

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

Ответ 3

Свойства высоты и ширины элемента изображения (например, свойства offsetHeight и offsetWidth любого элемента), return 0 вместо фактических значений, пока он не будет добавлен в какой-либо документ (и если его атрибут style.display не установлен в "none" ).
Общим способом обойти это является отображение изображения за пределами видимой области вашей страницы; ваши пользователи не увидят его, а его свойства высоты и ширины вернут фактические значения вместо 0. Затем вы должны удалить изображение из документа. 

var img = new Image();
img.src = "./filename.jpg";
img.style.position = "absolute";
img.style.left = -9999;             // Image width must not exceed 9999 pixels
img.style.visibility = "hidden";    // Maybe you can remove this
document.body.appendChild(img);
var imgHeight = img.height;
var imgWidth = img.width;
alert("image height = "  + imgHeight + ", image width = " + imgWidth); 
document.body.removeChild(img);     // Removes the image from the DOM (This does not destroy the image element)

Ответ 4

Если вы проверите эту ссылку здесь, это способ получить все размеры изображения в каталоге с PHP, который проверяет его, не загружая его на страницу. Это может вам помочь. Вы можете передать его в js с помощью

var dimensions = <?php echo json_encode($imageDimensions)?>

PHP Получить размеры изображений в каталоге

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