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

Użyj atrybutów naturalHeight i naturalWidth z HTML5 .

Na przykład:

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

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

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 trzeba usuwać stylu z atrybutów obrazu lub wymiarów obrazu. Po prostu utwórz element za pomocą javascript i uzyskaj szerokość utworzonego obiektu.

Główny problem polega na tym, że przeglądarki WebKit (Safari i Chrome) ładują informacje JavaScript i CSS równolegle. Tak więc JavaScript może wykonać przed obliczeniem efektów stylizacji CSS, zwracając złą odpowiedź. W jQuery odkryłem, że rozwiązaniem jest poczekać do dokumentu.readyState == 'complete',.np.,

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ą takie rzeczy, jak granice i wyściółka.

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

W moim przypadku, onload jest wywołana dla obrazów buforowanych, ale wysokość i szerokość są nadal równe 0. Proste setTimeout rozwiązało problem 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 Zdarzenie onload odpala się nawet wtedy, gdy obraz jest ładowany z cache (poprawa jQuery 1.4/1.5?)- ale jeśli nadal doświadczasz tego problemu, może połączenie mojej odpowiedzi i techniki {[5] } zadziała.

(zauważ, że dla mnie nie chodzi o predefiniowane wymiary, ani w atrybutach obrazu, ani w stylach CSS - ale możesz chcieć je usunąć, zgodnie z odpowiedzią Xaviego. Albo Sklonuj obraz.)

To działa dla mnie (safari 3.2), odpalając z wewnątrz zdarzenia window.onload:

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

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

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

Można programowo uzyskać obraz i sprawdzić wymiary za pomocą Javascript bez konieczności bałaganu z DOM w ogóle.

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

Jak uzyskać prawidłowe wymiary rzeczywiste bez mrugnięcia obrazem rzeczywistym:

(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

A co z image.naturalHeight i image.naturalWidth właściwościami?

Wydaje się działać dobrze w kilku wersjach w Chrome, Safari i Firefox, ale wcale nie w IE8 lub nawet IE9.

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

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

Gdzie my-img jest nazwą klasy używaną do wybierania mojego obrazu.

Jak wspomniano wcześniej, Xavi ODPOWIEDŹ nie będzie działać, jeśli obrazy są w pamięci podręcznej. Problem reaguje na to, że webkit nie uruchamia zdarzenia load na buforowanych obrazach, więc jeśli atrybuty szerokości/wysokości nie są jawnie ustawione w znaczniku img, jedynym niezawodnym sposobem uzyskania obrazów jest oczekiwanie na wywołanie zdarzenia window.load.

Zdarzenie window.load będzie uruchamiane zawsze , więc bezpiecznie jest uzyskać dostęp do szerokości/wysokości i img po tym bez żadnych sztuczek.

$(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 ładowane obrazy, które mogą być buforowane (wcześniej załadowane), możesz użyć metody Xavi oraz ciągu zapytania, aby wyzwolić odświeżanie pamięci podręcznej. Minusem jest to, że spowoduje to kolejne żądanie do serwera, dla img, 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 w img.src, będziesz musiał przeanalizować go i dodać dodatkowy param, aby wyczyścić pamięć podręczną.

Jak mówi Luke Smith, ładowanie obrazu to bałagan . Nie jest niezawodny we wszystkich przeglądarkach. Ten fakt sprawił mi wielki ból. Buforowany obraz 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 o tym, jak ten bałagan można załatwić w jQuery 1.4.

Stwierdziłem, że dość niezawodne jest ustawienie szerokości na 0, następnie poczekaj, aż właściwość "complete" przejdzie w wartość true, a właściwość width wejdzie w wartość większą niż zero. Powinieneś też 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 musiałem upewnić się, że nowy obraz jest proporcjonalnie dopasowany do stałego kontenera (w galerii zdjęć). Początkowo usunąłem atrybuty szerokości i wysokości obrazu po załadowaniu (poprzez Zdarzenie ładowania obrazu) i zresetowałem je po obliczeniu preferowanych wymiarów. Jednak to nie działa w Safari i ewentualnie IE (nie testowałem tego dokładnie w IE, ale obraz nawet nie pokazuje, więc...).

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

Oto Mój kod używający 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.

Istnieje teraz wtyczka jQuery, event.special.load, do radzenia sobie z przypadkami, w których Zdarzenie load na buforowanym obrazie nie uruchamia się: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Ostatnio musiałem znaleźć szerokość i wysokość dla ustawienia domyślnego rozmiaru .okno dialogowe przedstawiające wykres. Rozwiązanie, którego używam 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 to działa w FF3, Opera 10, IE 8,7,6

P. S. możesz znaleźć więcej rozwiązań zaglądając do niektórych wtyczek, takich jak LightBox lub ColorBox

Aby dodać do odpowiedzi Xaviego, Paul Irish ' s github gitgub Davida Desandro oferuje funkcję imagesLoaded () , która działa na tych samych zasadach i rozwiązuje problem buforowanych obrazów w niektórych przeglądarkach, które nie odpalają .Zdarzenie load () (z inteligentnym przełączaniem original_src -> data_uri - > original_src).

Jest szeroko stosowany i regularnie aktualizowany, co przyczynia się do tego, że jest to najbardziej solidne 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 imagesLoaded jquery plugin: 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 obrazek jest już użyty, możesz:

1. Ustaw simensions na initial

   Obraz.css ('width', 'initial'); obraz.css('height', 'initial');

2. Get dimensions

   Var originalWidth = $(this).szerokość(); var originalHeight = $(this).height ();

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

Użyłbyś go tak:

//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 z wyjątkiem IE od wersji 8 i poniżej.

Dla funkcji, w których nie chcesz zmieniać oryginalnego miejsca lub obrazu.

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

[1]} sprawdziłem odpowiedź Dio i działa świetnie dla mnie.

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

Upewnij się, że wszystkie funkcje wywołasz aso. obsługuje Rozmiar obrazu w funkcji recaller funkcji fadeIn ().

Używam innego podejścia, po prostu wykonuję wywołanie 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);

?>

This works cross browser

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

Pobierz Wymiary za pomocą

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

Kolejną propozycją 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 wyświetlić obraz o wymiarach 200*274

Oto rozwiązanie cross browser, które uruchamia zdarzenie, gdy wybrane obrazy są ładowane: 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 loaderze i ciągle wymyślałem 0. Wydaje mi się, że to może być to, czego szukasz, ponieważ działa na 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 na GitHubie!

Świetny przykład, aby sprawdzić szerokość i wysokość za pomocą Javascript

Https://github.com/AzizAK/ImageRealSize

- - - Edycja jest wymagana od 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);
    }

Oraz 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>