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

это работает для меня (сафари 3.2), стреляя из события window.onload:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

Основная проблема заключается в том, что браузеры WebKit (Safari и Chrome) загружают информацию JavaScript и CSS параллельно. Таким образом, JavaScript может выполняться до того, как будут вычислены эффекты стилизации CSS, возвращая неправильный ответ. В jQuery я обнаружил, что решение состоит в том, чтобы подождать, пока document.readyState == 'complete', например,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

Что касается ширины и высоты ... в зависимости от того, что вы делаете, вам могут понадобиться offsetWidth и offsetHeight, которые включают такие вещи, как границы и отступы.

Браузеры Webkit устанавливают свойства высоты и ширины после загрузки изображения. Вместо использования тайм-аутов я бы рекомендовал использовать событие загрузки изображения. Вот небольшой пример:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

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

Вы также можете использовать атрибуты HTML5 naturalHeight и naturalWidth.

Для функций, в которых вы не хотите изменять исходное размещение или изображение.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

Как говорит Люк Смит, загрузка изображения - беспорядок. Это не надежно для всех браузеров. Этот факт причинил мне большую боль. Кэшированное изображение вообще не запускает событие в некоторых браузерах, поэтому ошибаются те, кто сказал, что «загрузка изображения лучше, чем setTimeout».

Решение Люка Смита - здесь.

И есть интересное обсуждение о том, как с этим беспорядком можно справиться в jQuery 1.4.

Я обнаружил, что довольно надежно установить ширину равной 0, а затем подождать, пока свойство "complete" станет истинным, а свойство ширины не станет больше нуля. Вам также следует следить за ошибками.

function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Вам не нужно удалять стиль из атрибутов изображения или размеров изображения. Просто создайте элемент с помощью javascript и получите ширину созданного объекта.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if (this.complete) $(this).trigger("load");
});

Из комментария Криса: http://api.jquery.com/load-event/

Теперь существует плагин jQuery, event.special.load, для случаев, когда событие загрузки кэшированного изображения не срабатывает: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Как мы получаем правильные реальные размеры без моргания реального изображения:

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src = "'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

Он работает с <img class = "toreaddimensions" ...

Я проверил ответ Дио, и он отлично работает для меня.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Убедитесь, что вы вызываете все свои функции aso. этот дескриптор с размером изображения в функции повторного вызова fadeIn ().

Спасибо за это.

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

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

и, конечно же, код на стороне сервера:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

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

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

Для меня это работает в FF3, Opera 10, IE 8,7,6

P.S. Вы можете найти еще несколько решений, заглянув в некоторые плагины, такие как LightBox или ColorBox.

В принятом ответе много обсуждается проблема, при которой событие onload не запускается, если изображение загружается из кеша WebKit.

В моем случае onload срабатывает для кэшированных изображений, но высота и ширина все еще равны 0. Простой setTimeout решил проблему для меня:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

Я не могу сказать, почему событие onload запускается, даже когда изображение загружается из кеша (улучшение jQuery 1.4 / 1.5?), Но если вы все еще испытываете эту проблему, возможно, комбинация моего ответа и var src = img.src; img.src = ""; img.src = src; техника будет работать.

(Обратите внимание, что для моих целей меня не беспокоят заранее определенные размеры, как в атрибутах изображения, так и в стилях CSS, но вы можете удалить их в соответствии с ответом Хави. Или клонировать изображение.)

Используйте атрибуты naturalHeight и naturalWidth из HTML5.

Например:

var h = document.querySelector('img').naturalHeight;

Работает в IE9 +, Chrome, Firefox, Safari и Opera (статистика).

Чтобы добавить к ответу Xavi, Гитхаб Пола АйришаGitgub Дэвида Десандро предлагает функцию под названием imagesLoaded (), который работает по тем же принципам, и обходит проблему некоторых кешированных изображений браузера, которые не запускают событие .load () (с умным переключением original_src -> data_uri -> original_src).

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

Как указывалось ранее, Хави ответ не будет работать, если изображения находятся в кеше. Проблема связана с тем, что webkit не запускает событие загрузки для кэшированных изображений, поэтому, если атрибуты ширины / высоты явно не установлены в теге img, единственный надежный способ получить изображения - дождаться запуска события window.load.

Событие window.load запустит всегда, поэтому можно безопасно получить доступ к ширине / высоте и img после этого без каких-либо уловок.

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

Если вам нужно получить размер динамически загружаемых изображений, которые могут быть кэшированы (загружены ранее), вы можете использовать метод Xavi плюс строку запроса для запуска обновления кеша. Обратной стороной является то, что это вызовет еще один запрос к серверу для img, который уже кэширован и должен быть уже доступен. Глупый Webkit.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: если у вас уже есть QueryString в img.src, вам нужно будет проанализировать это и добавить дополнительный параметр для очистки кеша.

Другое предложение - использовать imagesLoaded плагин.

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});

Это работает в кросс-браузере

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];              

получить размеры с помощью

$(this).data('dimensions').width;
$(this).data('dimensions').height;

Ваше здоровье!

А как насчет свойств image.naturalHeight и image.naturalWidth?

Кажется, неплохо работает несколько версий в Chrome, Safari и Firefox, но совсем не в IE8 или даже IE9.

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

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

Чтобы использовать этот скрипт:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

Демо: http://jsfiddle.net/9543z/2/

Я сделал некоторую служебную функцию обходного пути, используя плагин jquery imagesLoaded: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if (!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

Вы можете использовать это, передав URL-адрес, функцию и ее контекст. Функция выполняется после загрузки изображения и возврата созданного изображения, его ширины и высоты.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

Вы можете программно получить изображение и проверить размеры, используя Javascript, без необходимости возиться с DOM.

var img = new Image();
img.onload = function() {
  console.info(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if (ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        }); 

// Этот код помогает показать изображение размером 200 * 274

Моя ситуация, наверное, немного другая. Я динамически меняю src изображения с помощью javascript, и мне необходимо убедиться, что новое изображение имеет пропорциональный размер, чтобы соответствовать фиксированному контейнеру (в фотогалерее). Сначала я просто удалил атрибуты ширины и высоты изображения после его загрузки (через событие загрузки изображения) и сбросил их после расчета предпочтительных размеров. Однако это не работает в Safari и, возможно, в IE (я не тестировал это полностью в IE, но изображение даже не отображается, так что ...).

В любом случае Safari сохраняет размеры предыдущего изображения, поэтому размеры всегда на одно изображение позади. Я предполагаю, что это как-то связано с кешем. Итак, самое простое решение - просто клонировать изображение и добавить его в DOM (важно, чтобы оно было добавлено в DOM, чтобы получить с и высоту). Присвойте изображению значение видимости "Скрытый" (не используйте display none, потому что это не сработает). После того, как вы получите размеры, удалите клон.

Вот мой код с использованием jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

Это решение работает в любом случае.

Вот кроссбраузерное решение, которое запускает событие при загрузке выбранных изображений: http://desandro.github.io/imagesloaded/ вы можете посмотреть высоту и ширину в функции imagesLoaded ().

Наткнулся на эту ветку, пытаясь найти ответ на свой вопрос. Я пытался получить ширину / высоту изображения в функции ПОСЛЕ загрузчика и продолжал получать 0. Я чувствую, что это может быть то, что вы ищете, поскольку это работает для меня:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}

Если образ уже используется, вам следует:

1. установить исходные размеры изображения

   image.css ('ширина', 'начальная'); image.css ('высота', 'начальная');

2. получить размеры

   var originalWidth = $ (это) .width (); var originalHeight = $ (это) .height ();

JQuery имеет два свойства, называемых naturalWidth и naturalHeight, которые вы можете использовать таким образом.

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

Где my-img - это имя класса, используемое для выбора моего изображения.

Загляните в этот репозиторий на гитхабе!

Отличный пример проверки ширины и высоты с помощью Javascript

https://github.com/AzizAK/ImageRealSize

--- Отредактировано требуется из некоторых комментариев ..

Код Javascript:

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

и HTML-код:

<html>
<head>
<title>Image Real Size</title>
<script src = "ImageSize.js"></script>
</head>
<body>
<input type = "file" id = "Image"/>
<input type = "button" value = "Find the dimensions" onclick = "CheckImageSize()"/>
</body>
<html>

Вы можете использовать свойства naturalWidth и naturalHeight элемента изображения HTML. (Вот еще Информация).

Вы бы использовали это так:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

Похоже, это работает во всех браузерах, кроме IE версии 8 и ниже.