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

278

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.

Frank Bannister
źródło
4
Akceptowana odpowiedź wykorzystuje zdarzenie ładowania obrazu. Ma to sens, ale okazuje się niewiarygodnym rozwiązaniem w sytuacjach, w których obrazy mogą być buforowane (ku mojemu rozczarowaniu).
Nosredna
Moje zdanie na ten temat może ci pomóc, przetestowane w najnowszym pakiecie Webkit. stackoverflow.com/questions/318630/…
xmarcos 27.09.11
5
@Nosredna, możesz być zainteresowany funkcją imagesLoaded , która uruchomi się nawet po buforowaniu obrazów.
bejonbee
7
Prawidłowa odpowiedź na to pytanie polega po prostu na użyciu właściwości naturalWidth i naturalHeight. Nie wymaga hakowania.
David Johnstone
Możesz także zrobić dokładnie to, co robisz przy ładowaniu okna zamiast gotowego dokumentu
użytkownik1380540

Odpowiedzi:

356

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.

Xavi
źródło
5
To sprytne, nie wiedziałem, że możesz zrobić $ (img) .load ();
SeanJA
3
Poza widthi heightwas powinien prawdopodobnie również usunąć min-width, min-height, max-widthi max-heightjak mogą one również wpływać na wymiary obrazu.
mqchen
5
Rozwiązanie FDisk jest bardzo sprytne. Niestety rozwiązanie, które napisał, będzie działać tylko wtedy, gdy obraz zostanie zapisany w pamięci podręcznej lub jeśli strona już zakończyła pobieranie. Jeśli obraz nie jest buforowany lub jeśli ten kod został wcześniej wywołany window.onload, może zostać zwrócona wysokość / szerokość równa 0. W każdym razie zintegrowałem pomysł FDisk z powyższym rozwiązaniem.
Xavi
5
kiedy próbuję console.log (pic_real_height), jestem niezdefiniowany za każdym razem. chrome, FF, IE9.
helgatheviking
10
Problem, który możesz tutaj mieć, polega na tym load(), że zostanie on wykonany asynchronicznie, więc jeśli chcesz uzyskać dostęp widthi height- mogą nie zostać jeszcze ustawione. Zamiast tego rób „magię” w load()sobie!
daGrevis
286

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

sandstrom
źródło
3
@DavidJohnstone Przykład ich użycia może pomóc. Ale zgadzam się, zdecydowanie zasługuje na wyższą pozycję.
Stephen
5
Wydaje się, że nie działa to w najnowszej wersji FireFox (30.0), chyba że obraz już istnieje w pamięci podręcznej.
Joel Kinzel
1
Zgadzam się z Davidem Johnstone'em. To dobra wiadomość.
jchwebdev
Pamiętaj, że nadal musisz poczekać, aż obraz się załaduje
Jesús Carrera,
Nie, clientHeight / clientWidth wyraźnie nie rób tego, o co pyta pytanie. Musi zwrócić wysokość i szerokość obrazu, a nie wysokość i szerokość obrazu, jak wygląda na stronie. naturalWidth i naturalHeight są poprawne.
Jeroen van den Broek
61


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.

FDisk
źródło
3
Od kilku miesięcy klonowanie obrazu za pomocą jquery (przy użyciu najnowszego Chrome) i uzyskiwanie jego właściwości zawsze zwraca 0x0 Do tej pory jest to jedyne rozwiązanie, które działa (przetestowałem wszystkie pozostałe na tej stronie) Przed powrotem ustawiłem t = również zerowy.
Omiod
1
FDisk nie sugeruje klonowania obrazu za pomocą jQuery. Sugeruje utworzenie nowego Imageobiektu, a następnie przyjrzenie się jego widthwłaściwości. To proste, eleganckie podejście. FDisk, masz mój głos. :)
davidchambers
3
Jest to bardzo sprytny sposób na uniknięcie problemów z css. Niestety opisane powyżej rozwiązanie będzie działać tylko wtedy, gdy obraz zostanie zapisany w pamięci podręcznej lub zakończy pobieranie. Jeśli obraz nie jest buforowany lub jeśli ten kod został wcześniej wywołany window.onload, może zostać zwrócona szerokość 0.
Xavi
1
Używam tego podejścia na stronie internetowej dla telefonów komórkowych w galerii obrazów. Większe obrazy to rozdzielczość jest wyświetlana ze 100% w css i mniejszymi w oryginalnych wymiarach.
FDisk,
1
Jak wspomniał Xavi, nie udaje się to w IE8 i czasami zależy od buforowania obrazu. Połączyłem to z tym podejściem i działa idealnie: najpierw powiązaj zdarzenie ładowania, a następnie przypisz obiektowi obrazu jego źródło stackoverflow.com/questions/4921712/...
Kevin C.
16

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.

Cugel
źródło
Tak, to jest powód. Lepszym obejściem jest użycie zdarzenia ładowania jQuery.
Frank Bannister,
6
$(window).load(function(){ ... });pomógł w moim przypadku
kolypto
16

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

JKS
źródło
Miałem ten bardzo problem z IE7 i IE8. setTimeout () działał dla mnie w tych przeglądarkach. Dziękuję Ci!
Vasile Tomoiaga,
11

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() );
});
piekarnik
źródło
Tak! Nie działał od $ (dokument) .ready (function () {}); Dzięki! Obraz musi być w pełni załadowany, aby mógł go odczytać. Oczywiście.
Frank Bannister,
8

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';
Yëco
źródło
2
To najlepsze rozwiązanie! Działa, nawet jeśli obraz nie jest wstępnie załadowany lub buforowany.
marlar
6

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.

Andrew Mackenzie
źródło
to nie działa w moim przypadku. dając mi NaN w zamian
saadk
5

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

Lis
źródło
5

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.

Samuel Santos
źródło
2
To nie są metody jQuery. naturalWidth(i wysokość) są właściwościami obiektu elementu obrazu. developer.mozilla.org/en/docs/Web/API/HTMLImageElement
sandstrom
3

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ą.

xmarcos
źródło
1
Pierwszy blok kodu po prostu otrzymuje wymiary elementu w załadowanym DOM, a nie samego obrazu ...
BasTaller,
1
To jest dokładnie najszybsze i najbardziej efektywne rozwiązanie. Bez wtyczki, bez sztuczek! Zamierzam opublikować podobną odpowiedź, ale znalazłem twoją.
vantrung -cuncon
2

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.

Nosredna
źródło
Drugi link w odpowiedzi jest martwy.
Pang
2
$("#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/

Jerome Jaglale
źródło
2

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.

Duane Comeaux
źródło
1

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

SDemonUA
źródło
1

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.

RobW
źródło
1
Zaktualizowaną wersję imagesLoadedfunkcji można znaleźć tutaj: github.com/desandro/imagesloaded
bejonbee
Tak, David Desandro obsługuje teraz tę funkcję. Dzięki za przypomnienie mi @somethingkindawierd, zaktualizowałem moją odpowiedź.
RobW
1

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/

CheeseSucker
źródło
1

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)
Zdeněk Mlčoch
źródło
1

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

Sebastián Rojas
źródło
1

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.

Jair Reina
źródło
Tak, nigdy więcej IE8: D
Jair Reina
0

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.

drubliczny
źródło
0

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

?>
Damijanc
źródło
1
nie jest to świetne rozwiązanie i potrwa dłużej niż jakiekolwiek inne rozwiązanie ze względu na ładowanie AJAX.
halfpastfour.am
0

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!

foxybagga
źródło
0

Inną sugestią jest użycie wtyczki imagesLoaded .

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
Gadelkareem
źródło
0
$(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

Eranda
źródło
0

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);
}
Stephen Synowsky
źródło
0

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>
Abdulaziz Alkharashi
źródło
jeśli to możliwe, możesz również dodać tutaj kilka wierszy kodu. ponieważ linki mogą się zmieniać w czasie
Tejus Prasad
-1

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);
Davin
źródło
1
To absolutnie nie działa. Powróci niezdefiniowany dla obu
Chris Cinelli