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

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

Источник

33 ответа

Решение

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

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

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

Источник

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

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

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

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)"
/>

Источник

Чтобы получить естественную высоту и ширину:

Источник

Я собираю из разных правильных ответов.

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

использование .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>

Источник

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

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

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

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

Источник

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

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

JQuery Ответ:

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

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

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

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

Источник

Мои два цента в jquery

Отказ от ответственности: это не обязательно дает ответ на этот вопрос, но расширяет наши возможности. Протестировано и работает в jQuery 3.3.1

Давайте рассмотрим:

  1. У вас есть URL-адрес изображения / путь, и вы хотите получить ширину и высоту изображения, не отображая его в DOM,

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

Вот как я это сделаю:

      // image path
const imageUrl = '/path/to/your/image.jpg'

// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
    const realWidth = this.width;
    const realHeight = this.height;
    alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})
Источник

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

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

Это альтернативный ответ для Node.js, что вряд ли то, что имел в виду OP, но может пригодиться и, похоже, входит в объем вопроса.

Это решение с Node.js, в примере используется структура Next.js, но будет работать с любой структурой Node.js. Оно использует probe-image-size Пакет NPM для разрешения атрибутов изображения со стороны сервера.

Пример использования: я использовал приведенный ниже код для определения размера изображения из сценария автоматизации Airtable, который вызывает мой собственный analyzeImage API и возвращает реквизиты изображения.

import {
  NextApiRequest,
  NextApiResponse,
} from 'next';
import probe from 'probe-image-size';

export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');

    res.json(result);
  } catch (e) {
    res.json({
      error: true,
      message: process.env.NODE_ENV === 'production' ? undefined : e.message,
    });
  }
};

export default analyzeImage;

Урожайность:

{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}
Источник

Может это поможет другим. В моем случае у меня есть File type (который гарантированно будет изображением), и мне нужны размеры изображения, не загружая его в DOM.

Общая стратегия: конвертировать File к ArrayBuffer -> Конвертировать ArrayBuffer в строку base64 -> используйте это как источник изображения с Image класс -> использовать naturalHeight & naturalWidth получить размеры.

const fr = new FileReader();
fr.readAsArrayBuffer(image); // image the the 'File' object
fr.onload = () => {
  const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;

  // Convert to base64. String.fromCharCode can hit stack overflow error if you pass
  // the entire arrayBuffer in, iteration gets around this
  let binary = '';
  const bytes = new Uint8Array(arrayBuffer);
  bytes.forEach(b => binary += String.fromCharCode(b));
  const base64Data = window.btoa(binary);

  // Create image object. Note, a default width/height MUST be given to constructor (per 
  // the docs) or naturalWidth/Height will always return 0.
  const imageObj = new Image(100, 100);
  imageObj.src = `data:${image.type};base64,${base64Data}`;
  imageObj.onload = () => {
    console.log(imageObj.naturalWidth, imageObj.naturalHeight);
  }
}

Это позволяет вам получить размеры и соотношение сторон изображения из Fileбез рендеринга. Можно легко преобразовать onload функции для RxJS Observables, используя fromEvent для лучшего асинхронного опыта:

// fr is the file reader, this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')
Источник

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

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

 });
Источник

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

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

Источник 
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 ...
Источник

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

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

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

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

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

Источник

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

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

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

Источник
Другие вопросы по тегам