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

Я создаю плагин JQuery.

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

Следующее работает с Firefox 3, IE7 и Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Но в браузерах Webkit, таких как Safari и Google Chrome, значения равны 0.

Браузеры 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 .

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

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

Например:

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

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

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 и получите ширину созданного объекта.

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

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

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

В принятом ответе много говорится о проблеме, при которой 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 - но вы можете удалить их, как указано в ответе Хави. Или клонировать изображение.)

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

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

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

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

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

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

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

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

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

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

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

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

(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" ...

Как было сказано ранее, ответ Xavi не будет работать, если изображения находятся в кеше. Эта проблема связана с тем, что webkit не запускает событие load для кэшированных изображений, поэтому, если атрибуты width / height явно не заданы в теге 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 , вам придется проанализировать его и добавить дополнительный параметр для очистки кэша.

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

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

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

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

$("#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/

Моя ситуация, вероятно, немного отличается. Я динамически изменяю 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);

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

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

Недавно мне нужно было найти ширину и высоту для установки размера по умолчанию для .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

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

Чтобы добавить к ответу Хави, gitub от Paul Irish, gitgub Дэвида Десандро, предлагает функцию imagesLoaded (), которая работает на тех же принципах и решает проблему с кэшированными изображениями некоторых браузеров, не запускающими событие .load () (с умным original_src -> data_uri -> исходное переключение).

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

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

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/

Я сделал несколько вспомогательных функций, используя плагин imagesLoaded jquery: 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)

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

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

   image.css ('width', 'initial'); image.css ('height', 'initial');

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

   var originalWidth = $ (this) .width (); var originalHeight = $ (this) .height ();

Вы можете использовать свойства 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 и ниже.

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

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

Убедитесь, что вы вызываете все свои функции так же. этот дескриптор с размером изображения в функции recaller функции 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);

?>

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

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;

Ура!

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

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

$(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

Вот кросс-браузерное решение, которое запускает событие при загрузке выбранных изображений: 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);
}

Проверьте этот репозиторий в github!

Отличный пример для проверки ширины и высоты с использованием 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>

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

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