Как получить размер изображения (высота и ширина) с помощью JavaScript?

Существуют ли какие-либо API-интерфейсы или методы JavaScript или jQuery для получения размеров изображения на странице?

Вы можете программно получить изображение и проверить размеры, используя Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Это может быть полезно, если изображение не является частью разметки.

clientWidth и clientHeight - это свойства DOM, которые показывают текущий размер в браузере внутренних размеров элемента DOM (исключая поля и границы). Таким образом, в случае элемента IMG, он получит фактические размеры видимого изображения.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Также (в дополнение к ответам Рекса и Яна) есть:

imageElement.naturalHeight

а также

imageElement.naturalWidth

Они обеспечивают высоту и ширину самого файла изображения (а не только элемент изображения).

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

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

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

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

Прежде всего, я использовал программу под названием Dash, чтобы получить обзор API изображения. В нем утверждается, что heightи widthявляются отображаемой высотой / шириной изображения, а также naturalHeightи naturalWidthявляются внутренней высотой / шириной изображения (и являются только HTML5).

Я использовал изображение красивой бабочки из файла с высотой 300 и шириной 400. И этот Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Затем я использовал этот HTML со встроенным CSS для высоты и ширины.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Результаты:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Затем я изменил HTML-код на следующий:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

т.е. используя атрибуты высоты и ширины, а не встроенные стили

Результаты:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Затем я изменил HTML-код на следующий:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

то есть используя как атрибуты, так и CSS, чтобы увидеть, какой из них имеет приоритет.

Результаты:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Используя JQuery, вы делаете это:

var imgWidth = $("#imgIDWhatever").width();

Все, что другие забыли, это то, что вы не можете проверить размер изображения перед его загрузкой. Когда автор проверяет все опубликованные методы, он будет работать только на localhost. Поскольку здесь можно использовать jQuery, помните, что событие 'ready' вызывается до загрузки изображений. $ ('# xxx'). width () и .height () должны быть запущены в событии onload или позже.

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

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

С библиотекой jQuery

Используйте .width()и .height().

Подробнее в ширину JQuery и JQuery heigth .

Пример кода

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

Хорошо, ребята, я думаю, что я улучшил исходный код, чтобы иметь возможность загружать изображение, прежде чем пытаться выяснить его свойства, иначе оно будет отображать '0 * 0', потому что следующий оператор был бы вызван до того, как файл был загружен в браузер. Требуется JQuery ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

Предполагая, что мы хотим получить размеры изображения <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Естественные размеры

el.naturalWidthи el.naturalHeightполучит нам естественные размеры , размеры файла изображения.

Размеры макета

el.offsetWidthи el.offsetHeightполучит нам размеры, при которых элемент отображается в документе.

Перед использованием реального размера изображения вы должны загрузить исходное изображение. Если вы используете JQuery Framework, вы можете получить реальный размер изображения простым способом.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

Этот ответ был именно тем, что я искал (в jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

У вас может быть простая функция, такая как следующая ( imageDimensions()), если вы не боитесь использовать обещания .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

JQuery Ответ:

$height = $('#image_id').height();
$width  = $('#image_id').width();

Я подумал, что это может быть полезно для тех, кто использует Javascript и / или Typescript в 2019 году.

Я считаю, что следующее, как некоторые предположили, неверно:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Это правильно:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Вывод:

Используйте img, а не thisв onloadфункции.

Недавно у меня возникла та же проблема с ошибкой в ​​флайдере. Высота первого изображения была установлена ​​меньше из-за задержки загрузки. Я попытался следующий метод для решения этой проблемы, и это сработало.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Это даст вам высоту относительно ширины, которую вы установили, а не исходную ширину или ноль.

Вы также можете использовать:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Никки де Майер спросил после фоновой картины; Я просто получаю его из CSS и заменяю "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

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

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

Просто вы можете проверить, как это.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

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

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

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

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Это мой метод, надеюсь, это полезно. :)

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

эта работа для предварительного просмотра и загрузки нескольких изображений. если вы должны выбрать для каждого из изображений по одному. Затем скопируйте и вставьте во все функции предварительного просмотра изображения и подтвердите !!!

Перед получением атрибутов элемента страница документа должна быть загружена:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

просто передайте объект img file, полученный элементом input, когда мы выберем правильный файл, он даст натуральную высоту и ширину изображения

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}