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

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

2190   23  

23 ответов:

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;
393  
2009-08-21 10:22:53

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

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

693  
2018-01-18 14:13:38

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

imageElement.naturalHeight

и

imageElement.naturalWidth

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

259  
2017-08-09 02:12:05

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

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});
106  
2011-03-01 23:38:20

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

т. е. с помощью атрибутов height и width, а не рядный стили

результаты:

/*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
89  
2017-08-09 01:45:35

С помощью JQuery вы делаете это:

var imgWidth = $("#imgIDWhatever").width();
62  
2009-03-08 08:59:57

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

26  
2009-03-10 15:54:42

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

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  
2009-08-04 14:50:29

С 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>
8  
2016-06-30 07:53:46

ОК, ребята, я думаю, что я улучшил исходный код, чтобы иметь возможность загружать изображение, прежде чем пытаться узнать его свойства, иначе он будет отображать '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  
2011-03-01 23:41:00

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

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})
6  
2012-12-19 15:41:53

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

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
4  
2017-05-23 15:26:35

JQuery В Ответ:

$height = $('#image_id').height();
$width  = $('#image_id').width();
2  
2013-01-02 09:16:44

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

  <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  
2016-03-26 04:31:45

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

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
1  
2012-02-18 03:05:41

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

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '');
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  
2012-04-19 18:09:43 
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  
2014-04-04 10:46:30

недавно у меня была такая же проблема для ошибки в ползунке 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  
2014-10-14 17:37:51

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

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

 });
1  
2015-03-12 11:59:18 
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  
2015-10-01 16:16:28

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

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

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

0  
2014-10-12 12:45:27 
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  
2016-02-09 17:41:24

перед приобретением атрибутов элемента, страница документа должна быть onload:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}
0  
2017-02-03 05:28:01

Comments

    Ничего не найдено.
Click here to cancel reply.