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

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

+573
источник поделиться
26 ответов

Вы можете программно получить изображение и проверить размеры с помощью 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';

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

+755
источник

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;
+425
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

imageElement.naturalHeight

и

imageElement.naturalWidth

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

+306
источник

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

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});
+109
источник

Я думаю, что обновление этих ответов полезно, потому что один из наиболее проголосовавших ответов предлагает использовать 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
+96
источник

Используя JQuery, вы выполните следующее:

var imgWidth = $("#imgIDWhatever").width();
+63
источник

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

+26
источник

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

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';
+18
источник

С jQuery библиотека -

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

Подробнее в jQuery width и 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>
+8
источник

ОК, я думаю, что я улучшил исходный код, чтобы позволить загрузке изображения, прежде чем пытаться выяснить его свойства, иначе он отобразит "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']);
}
+7
источник

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

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})
+6
источник

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

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
+5
источник

Ответ JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();
+2
источник

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

  <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>
+2
источник

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

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
+1
источник

Ники Де Маейер спросил после фоновой картины; Я просто получаю его из 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()));
}
+1
источник
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 ...
+1
источник

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

// 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';

Это даст вам высоту относительно установленной ширины, а не оригинальной ширины или нуля.

+1
источник

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

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

 });
+1
источник
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.

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

+1
источник

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

const imageDimensions = file => new Promise((resolve, reject) => {
  try {
    const img = new Image()    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img
      resolve({ width, height })
    }
    img.onerror = () => {
      reject('There was some problem during the image loading')
    }
    img.src = URL.createObjectURL(file)
  } catch (error) {
    reject(error)
  }
})

const getInfo = ({ target: { files } }) => {
 const [file] = files
 imageDimensions(file)
   .then(result => {
     console.info(result)
   })
   .catch(error => {
     console.error(error)
   })
}
Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
+1
источник

Я подумал, что это может быть полезно для тех, кто использует 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.

+1
источник

Предполагая, что мы хотим получить размеры изображения <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 получат нам размеры, при которых элемент отображается в документе.

+1
источник

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

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

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

0
источник
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]);
}

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

0
источник

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

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос