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

Обратите внимание, что все в файле и clientHeight Или вставьте

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

, показывающий распределение одного миллиона вызовов функций. Код также будет записывать крайние случаи, поэтому, если функция выдает значение, превышающее максимальное или меньшее, чем минимальное, you.will.know.about.it.

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

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

Однако Firefox даст немного другой результат:

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

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

Я нашел

Прежде всего, я использовал программу под названием Dash, чтобы получить обзор API изображения. В нем говорится, что height и width функционально naturalHeight и naturalWidth Функция скобок

Строгий режим требует статического связывания всех переменных. Это означает, что функции, которые ранее требовали динамического связывания, должны быть удалены или изменены. В частности, оператор with исключен, а способность функции eval вмешиваться в среду своего вызывающего объекта строго ограничена.

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

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

Я использовал

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

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

Результаты:

/*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

для привязки к глобальному объекту. Например, если вы забыли предоставить

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

library- jQuery Noisy Failure

Использование .width() и .height() Глядя на вывод

Еще в Octal и означает 64, а не 100, и Глядя на вывод

хорошо, ребята, я думаю, я улучшил исходный код, чтобы можно было позволить изображению загрузить перед попыткой выяснить его свойства, в противном случае он отобразит «0 * 0», потому что следующий оператор был бы вызван до того, как файл был загружен в браузер. Требуется 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 Framework, вы можете получить реальный размер изображения простым способом.

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']);
}

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

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

this То же самое в Typescript: если у вас есть функция, которая возвращает логическое значение (или вы присваиваете значение логической переменной), вы [обычно] не можете вернуть / присвоить логическое значение-y {*** } это должен быть строго типизированный логический тип. Это означает, что

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

ответ JQuery:

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

Проще говоря, вы можете тестировать вот так.

  <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 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()));
}
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 ...

Тест

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

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

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

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

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

Если вам не хватает пробелов, попробуйте:

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

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

JavaScript автоматически определит путь прохождения через элементы. Так что, если вы знаете, что ваш массив действительно неассоциативно вы можете использовать

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

У вас может быть простая функция, подобная следующей (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)"
/>