Есть ли способ прочитать "NaturalWidth" изображения с помощью jquery?

Question

Я пробовал что-то вроде этого:

var Height = $(this).naturalHeight;

Но это не работает. Есть ли способ сделать это

Гриз

Answer 1

Я использую собственные свойства javascript после применения jQuery, а затем зачистки jQuery

.naturalWidth / .naturalHeight

На объекте jQuery я использую

var width = this.naturalWidth; 
var height = this.naturalHeight;

или

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight;

если объект jQuery не выбран.

С помощью get (0) для объекта jQuery вы можете получить доступ к связанному DOM-элементу . В нативном элементе DOM вы можете работать с нативным кодом javascript (здесь доступ к атрибуту нативного javascript

Answer 2

Мне кажется, что принятое решение изменяет внешний вид объекта. Время от времени jQuery слишком полезен, и вы должны сказать это, чтобы убраться с дороги. Если вы хотите использовать naturalWidth или naturalHeight, просто используйте тот, который уже существует, преобразовав объект jQuery в собственную ссылку на элемент браузера.

var Height = document.getElementById($(this).attr("id")).naturalHeight;

Answer 3

Один из способов получения размеров изображения - динамическая загрузка копии изображения с использованием javascript и получение его размеров:

// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
    alert('height: ' + img.height);
    alert('width: ' + img.width);
    // garbage collect img
    delete img;
}).error(function () {
    // image couldnt be loaded
    alert('An error occurred and your image could not be loaded.  Please try again.');
}).attr({ src: imgSrc });

Answer 4

Вот пример функции jQuery, которая работает в старых версиях IE даже для больших изображений.

/*
 * NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load.
 * @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined.
 */
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) {
    var img = this[0];
    var naturalWidth = img.naturalWidth;
    if (naturalWidth) {
        onNaturalWidthDefined(img);
    } else { //No naturalWidth attribute in IE<9 - calculate it manually.
        var newImg = new Image();
        newImg.src = img.src;
        //Wait for image to load
        if (newImg.complete) {
            img.naturalWidth = newImg.width;
            onNaturalWidthDefined(img);
        } else {
            $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)});
        }
    }
};

Простое использование:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)});

Answer 5

Источник От ЗДЕСЬ

Вот краткий плагин jQuery (любая версия), который добавляет два метода: naturalWidth () и naturalHeight (). Он использует ветвление, чтобы определить, поддерживаются ли браузер naturalWidth и naturalHeight. Если поддерживается, метод просто становится получателем для свойства naturalWidth или naturalHeight. Если не поддерживается, метод создает новый элемент изображения без стиля и возвращает фактическую ширину и высоту этого элемента.

  // adds .naturalWidth() and .naturalHeight() methods to jQuery
  // for retreaving a normalized naturalWidth and naturalHeight.
  (function($){
    var
    props = ['Width', 'Height'],
    prop;

    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ? 
      function () {
      return this[0][natural];
      } : 
      function () {
      var 
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
  }(jQuery));

  // Example usage:
  var 
  nWidth = $('img#example').naturalWidth(),
  nHeight = $('img#example').naturalHeight();

Answer 6

просто попробую

var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();

Это в основном расчет для naturalWidth и naturalHeight в любом случае

Answer 7

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

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

Answer 8

$this.css('height', 'auto');
var height = $this.height();