Uzyskaj rzeczywistą szerokość i wysokość obrazu za pomocą JavaScript? (w Safari / Chrome)

Tworzę wtyczkę jQuery.

Jak uzyskać rzeczywistą szerokość i wysokość obrazu za pomocą Javascript w Safari?

Następujące działa z Firefox 3, IE7 i 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();

Ale w przeglądarkach Webkit, takich jak Safari i Google Chrome, wartości wynoszą 0.

Przeglądarki Webkit ustawiają właściwość height i width po załadowaniu obrazu. Zamiast używać limitów czasu, zaleciłbym użycie zdarzenia ładowania obrazu. Oto szybki przykład:

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

Aby uniknąć jakiegokolwiek wpływu CSS na wymiary obrazu, powyższy kod tworzy kopię obrazu w pamięci. To bardzo sprytne rozwiązanie sugerowane przez FDisk .

Możesz także użyć atrybutów naturalHeighti naturalWidthHTML5.

Użyj atrybutów naturalHeighti naturalWidthz HTML5 .

Na przykład:

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

Działa w IE9 +, Chrome, Firefox, Safari i Opera ( statystyki ).

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

Nie musisz usuwać stylu z atrybutów obrazu lub wymiarów obrazu. Wystarczy utworzyć element za pomocą javascript i uzyskać utworzoną szerokość obiektu.

Problem polega na tym, że przeglądarki WebKit (Safari i Chrome) ładują równolegle informacje JavaScript i CSS. W związku z tym JavaScript może zostać wykonany przed obliczeniem efektów stylizacji CSS, zwracając złą odpowiedź. W jQuery odkryłem, że rozwiązaniem jest poczekać, aż 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) 

Jeśli chodzi o szerokość i wysokość ... w zależności od tego, co robisz, możesz chcieć offsetWidth i offsetHeight, które obejmują między innymi obramowania i wypełnienie.

W przyjętej odpowiedzi jest wiele dyskusji na temat problemu, w którym onload zdarzenie nie uruchamia się, jeśli obraz zostanie załadowany z pamięci podręcznej WebKit.

W moim przypadku onloadpożary dla obrazów w pamięci podręcznej, ale wysokość i szerokość są nadal równe 0. Prosty setTimeoutproblem rozwiązał dla mnie:

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

Nie mogę powiedzieć, dlaczego onloadzdarzenie się uruchamia, nawet jeśli obraz jest ładowany z pamięci podręcznej (poprawa jQuery 1.4 / 1.5?) - ale jeśli nadal występuje ten problem, być może połączenie mojej odpowiedzi i var src = img.src; img.src = ""; img.src = src;techniki praca.

(Pamiętaj, że dla moich celów nie martwię się o wstępnie zdefiniowane wymiary, ani w atrybutach obrazu, ani w stylach CSS - ale możesz je usunąć zgodnie z odpowiedzią Xavi. Lub sklonować obraz.)

to działa dla mnie (safari 3.2), strzelając z poziomu window.onloadwydarzenia:

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

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

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

Możesz programowo uzyskać obraz i sprawdzić wymiary za pomocą Javascript bez konieczności w ogóle bałagania w 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';

Co image.naturalHeighti image.naturalWidthwłaściwości?

Wygląda na to, że dobrze działa z powrotem kilka wersji w Chrome, Safari i Firefox, ale wcale nie w IE8, a nawet IE9.

Jak uzyskać właściwe rzeczywiste wymiary bez rzeczywistego obrazu:

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

Działa z <img class = "toreaddimensions" ...

Jquery ma dwie właściwości o nazwie naturalWidth i naturalHeight, których można używać w ten sposób.

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

Gdzie my-img to nazwa klasy używana do wyboru mojego obrazu.

Jak wspomniano wcześniej, odpowiedź Xavi nie będzie działać, jeśli obrazy znajdują się w pamięci podręcznej. Problem występuje w przypadku, gdy webkit nie uruchamia zdarzenia ładowania na buforowanych obrazach, więc jeśli atrybuty szerokość / wysokość nie są wyraźnie ustawione w znaczniku img, jedynym niezawodnym sposobem na uzyskanie obrazów jest oczekiwanie na uruchomienie window.loadzdarzenia.

window.loadWydarzenie zadziała zawsze , więc jest to bezpieczne, aby uzyskać dostęp do szerokość / wysokość i img potem bez podstęp.

$(window).load(function(){

   //these all work

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

});

Jeśli chcesz uzyskać rozmiar dynamicznie ładowanych obrazów, które mogą zostać zbuforowane (wcześniej załadowane), możesz użyć metody Xavi oraz ciągu zapytania, aby uruchomić odświeżanie pamięci podręcznej. Minusem jest to, że spowoduje kolejne żądanie do serwera, dla obrazu, który jest już buforowany i powinien być już dostępny. Głupi 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: jeśli masz już QueryString img.src, będziesz musiał go przeanalizować i dodać dodatkowy parametr, aby wyczyścić pamięć podręczną.

Jak mówi Luke Smith, ładowanie obrazu to bałagan . Nie jest wiarygodny we wszystkich przeglądarkach. Ten fakt sprawił mi wielki ból. Obraz z pamięci podręcznej w ogóle nie uruchomi zdarzenia w niektórych przeglądarkach, więc ci, którzy powiedzieli „ładowanie obrazu jest lepsze niż setTimeout”, są w błędzie.

Rozwiązanie Luke'a Smitha jest tutaj.

I jest ciekawa dyskusja temat tego, jak poradzić sobie z tym bałaganem w jQuery 1.4.

Przekonałem się, że całkiem niezawodnie jest ustawić szerokość na 0, a następnie poczekać, aż właściwość „complete” się spełni, a właściwość width będzie większa niż zero. Powinieneś także uważać na błędy.

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

Z komentarza Chrisa: http://api.jquery.com/load-event/

Moja sytuacja jest prawdopodobnie trochę inna. Dynamicznie zmieniam src obrazu za pomocą javascript i potrzebuję upewnić się, że nowy obraz ma proporcjonalny rozmiar, aby zmieścił się w stałym kontenerze (w galerii zdjęć). Początkowo właśnie usunąłem atrybuty szerokości i wysokości obrazu po jego załadowaniu (poprzez zdarzenie ładowania obrazu) i zresetowałem je po obliczeniu preferowanych wymiarów. Jednak to nie działa w przeglądarce Safari i prawdopodobnie w IE (nie przetestowałem go dokładnie w IE, ale obraz nawet się nie pokazuje, więc ...).

W każdym razie Safari zachowuje wymiary poprzedniego obrazu, więc wymiary są zawsze o jeden obraz za nimi. Zakładam, że ma to coś wspólnego z pamięcią podręczną. Zatem najprostszym rozwiązaniem jest po prostu sklonowanie obrazu i dodanie go do DOM (ważne jest, aby dodać go do DOM, aby uzyskać i wysokość). Nadaj obrazowi wartość widoczności ukrytego (nie używaj display none, ponieważ nie będzie działać). Po uzyskaniu wymiarów usuń klon.

Oto mój kod za pomocą 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);

To rozwiązanie działa w każdym przypadku.

Teraz dostępna jest wtyczka jQuery event.special.load, która radzi sobie z przypadkami, w których zdarzenie load na zbuforowanym obrazie nie jest uruchamiane: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Ostatnio musiałem znaleźć szerokość i wysokość do ustawienia domyślnego rozmiaru .dialog reprezentującego wykres. Rozwiązanie, z którego korzystałem to:

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

Dla mnie działa to w FF3, Opera 10, IE 8,7,6

PS Być może znajdziesz więcej rozwiązań, które sprawdzą się w niektórych wtyczkach, takich jak LightBox lub ColorBox

Aby dodać do odpowiedzi Xaviego, gitub Paula Irisha, David Desandro, gitgub oferuje funkcję o nazwie imagesLoaded () która działa na tych samych zasadach, i rozwiązuje problem niektórych obrazów w pamięci podręcznej przeglądarki, które nie uruchamiają zdarzenia .load () (ze sprytnym original_src -> data_uri -> przełączanie original_src).

Jest szeroko stosowany i regularnie aktualizowany, co sprawia, że ​​jest to najbardziej niezawodne rozwiązanie problemu, IMO.

Działa to zarówno dla obrazów buforowanych, jak i dynamicznie ładowanych.

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

Aby użyć tego skryptu:

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

Demo: http://jsfiddle.net/9543z/2/

Zrobiłem pewne obejście funkcji narzędzia, używając wtyczki jQuery imageLoaded: 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}));
            },

Możesz tego użyć, przekazując adres URL, funkcję i jej kontekst. Funkcja jest wykonywana po załadowaniu obrazu i zwróceniu utworzonego obrazu, jego szerokości i wysokości.

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

Jeśli obraz jest już używany, powinieneś:

1. ustaw symulacje obrazu na początkowe

   image.css („szerokość”, „inicjał”); image.css („wysokość”, „inicjał”);

2. uzyskać wymiary

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

Możesz użyć właściwości naturalWidth i naturalHeight elementu obrazu HTML. (Oto więcej informacji ).

Użyłbyś tego w ten sposób:

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

Wygląda na to, że działa to we wszystkich przeglądarkach oprócz IE od wersji 8 i niższych.

Sprawdziłem odpowiedź Dio i działa ona dla mnie świetnie.

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

Upewnij się, że wszystkie swoje funkcje nazywacie aso. obsługują rozmiar obrazu w funkcji przypominającej fadeIn ().

Dzięki za to.

Używam innego podejścia, po prostu wywołuję Ajax do serwera, aby uzyskać rozmiar obrazu, gdy obiekt obrazu jest w użyciu.

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

i oczywiście kod po stronie serwera:

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

?>

Działa to w różnych przeglądarkach

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

uzyskaj wymiary za pomocą

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

Twoje zdrowie!

Inną sugestią jest użycie wtyczki 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);
                            }
                        }); 

// Ten kod pomaga pokazać obraz o wymiarach 200 * 274

Oto rozwiązanie dla wielu przeglądarek, które wyzwala zdarzenie po załadowaniu wybranych obrazów: http://desandro.github.io/imagesloaded/ możesz sprawdzić wysokość i szerokość w funkcji imagesLoaded ().

Natknąłem się na ten wątek, próbując znaleźć odpowiedź na moje własne pytanie. Próbowałem uzyskać szerokość / wysokość obrazu w funkcji PO module ładującym i ciągle wymyśliłem 0. Czuję, że to może być to, czego szukasz, ponieważ to działa dla mnie:

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

Sprawdź to repozytorium w github!

Świetny przykład na sprawdzenie szerokości i wysokości za pomocą Javascript

https://github.com/AzizAK/ImageRealSize

--- Wymagane jest edytowanie niektórych komentarzy ..

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

i kod 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>

Dla funkcji, w których nie chcesz zmieniać oryginalnego położenia ani obrazu.

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