Як отримати розмір зображення (висоту та ширину) за допомогою 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'). ширина () і. висота () повинні бути запущені в події завантаження або пізніше.

Це дійсно можна зробити лише за допомогою зворотного виклику події завантаження, оскільки розмір зображення не відомий, поки воно фактично не закінчиться завантаженням. Щось на зразок коду нижче ...

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 .

Приклад коду-

$(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функції.

Нещодавно у мене виникла проблема з помилкою в повзунку 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';

Це дасть вам висоту відносно заданої ширини, а не оригінальної ширини або нуля.

Ви також можете використовувати:

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, який отримано вхідним елементом, коли ми виберемо правильний файл, він дасть висоту та ширину зображення

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;
}