Erhalten Sie die tatsächliche Breite und Höhe eines Bildes mit JavaScript? (in Safari / Chrome)

278

Ich erstelle ein jQuery-Plugin.

Wie erhalte ich mit Javascript in Safari die tatsächliche Bildbreite und -höhe?

Folgendes funktioniert mit Firefox 3, IE7 und 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();

In Webkit-Browsern wie Safari und Google Chrome sind die Werte jedoch 0.

Frank Bannister
quelle
4
Die akzeptierte Antwort verwendet das Bildladeereignis. Sinnvoll, erweist sich jedoch als unzuverlässige Lösung in Situationen, in denen Bilder zwischengespeichert werden können (sehr zu meiner Bestürzung).
Nosredna
Meine Meinung dazu kann Ihnen helfen, getestet im neuesten Webkit. stackoverflow.com/questions/318630/…
xmarcos
5
@Nosredna, Sie könnten an der Funktion imagesLoaded interessiert sein, die auch dann ausgelöst wird, wenn Bilder zwischengespeichert wurden.
Bejonbee
7
Die richtige Antwort auf diese Frage besteht darin, einfach die Eigenschaften naturalWidth und naturalHeight zu verwenden. Kein Hackery erforderlich.
David Johnstone
Sie können auch genau das tun, was Sie beim Laden des Fensters tun, anstatt das Dokument fertig zu stellen
user1380540

Antworten:

356

Webkit-Browser legen die Eigenschaft height und width fest, nachdem das Bild geladen wurde. Anstatt Zeitüberschreitungen zu verwenden, würde ich empfehlen, das Onload-Ereignis eines Bildes zu verwenden. Hier ist ein kurzes Beispiel:

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

Um die Auswirkungen von CSS auf die Bildabmessungen zu vermeiden, erstellt der obige Code eine Kopie des Bilds im Speicher. Dies ist eine sehr clevere Lösung, die von FDisk vorgeschlagen wurde .

Sie können auch die Attribute naturalHeightund naturalWidthHTML5 verwenden.

Xavi
quelle
5
Das ist klug, wusste nicht, dass du $ (img) .load () machen kannst;
SeanJA
3
Zusätzlich zu widthund heightSie sollten wahrscheinlich auch entfernen min-width, min-height, max-widthund max-heightwie sie auch die Bildabmessungen beeinflussen könnten.
Mqchen
5
Die Lösung von FDisk ist sehr clever. Leider funktioniert die Lösung, wie er sie geschrieben hat, nur, wenn das Bild zwischengespeichert ist oder wenn der Download der Seite bereits abgeschlossen ist. Wenn das Bild nicht zwischengespeichert wird oder dieser Code zuvor aufgerufen wurde window.onload, wird möglicherweise eine Höhe / Breite von 0 zurückgegeben. Auf jeden Fall habe ich die Idee von FDisk in die obige Lösung integriert.
Xavi
5
Wenn ich versuche, console.log (pic_real_height) zu konsolidieren, werde ich jedes Mal undefiniert. Chrom, FF, IE9.
Helgatheviking
10
Das Problem, das Sie hier haben können, ist, dass load()es asynchron ausgeführt wird, wenn Sie darauf zugreifen möchten widthund height- sie möglicherweise noch nicht festgelegt wurden. Mach stattdessen „die Magie“ an load()sich!
DaGrevis
286

Verwenden Sie die Attribute naturalHeightund naturalWidthaus HTML5 .

Beispielsweise:

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

Funktioniert in IE9 +, Chrome, Firefox, Safari und Opera ( Statistiken ).

Sandstrom
quelle
3
@ DavidJohnstone Ein Beispiel für die Verwendung könnte hilfreich sein. Aber ich stimme zu, verdient es definitiv, höher zu sein.
Stephen
5
Dies scheint in der neuesten Version von FireFox (30.0) nur zu funktionieren, wenn das Image bereits im Cache vorhanden ist.
Joel Kinzel
1
Ich stimme David Johnstone zu. Das sind gute Nachrichten.
Jchwebdev
Beachten Sie, dass Sie noch warten müssen, bis das Bild geladen ist
Jesús Carrera
Nein, clientHeight / clientWidth tun explizit nicht das, was die Frage stellt. Es muss die Höhe und Breite des Bildes zurückgeben, nicht die Höhe und Breite des Bildes, wie es auf der Seite aussieht. naturalWidth und naturalHeight sind korrekt.
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;
}

Sie müssen den Stil nicht aus den Attributen für Bild oder Bildabmessungen entfernen. Erstellen Sie einfach ein Element mit Javascript und erhalten Sie die erstellte Objektbreite.

FDisk
quelle
3
Seit einigen Monaten gibt das Klonen eines Bildes mit jquery (unter Verwendung des neuesten Chrome) und das Abrufen seiner Eigenschaften immer 0x0 zurück. Bisher ist dies die einzige Lösung, die funktioniert (alle anderen auf dieser Seite getestet). Vor der Rückkehr setze ich t = null auch.
Omiod
1
FDisk schlägt nicht vor, das Bild mit jQuery zu klonen. Er schlägt vor, ein neues ImageObjekt zu erstellen und dann dessen widthEigentum zu betrachten. Dies ist ein einfacher, eleganter Ansatz. FDisk, du hast meine Stimme. :)
Davidchambers
3
Dies ist eine sehr clevere Methode, um CSS-Probleme zu vermeiden. Leider funktioniert die oben beschriebene Lösung nur, wenn das Bild zwischengespeichert ist oder der Download bereits abgeschlossen ist. Wenn das Bild nicht zwischengespeichert wird oder dieser Code zuvor aufgerufen wurde window.onload, wird möglicherweise eine Breite von 0 zurückgegeben.
Xavi
1
Ich verwende diesen Ansatz auf einer Website für Mobiltelefone in der Bildergalerie. Bei größeren Bildern wird die Auflösung mit 100% in CSS und kleiner in den Originalabmessungen angezeigt.
FDisk
1
Wie Xavi erwähnt hat, schlägt dies in IE8 fehl und hängt manchmal vom Bild-Caching ab. Also habe ich es mit diesem Ansatz gekoppelt und es funktioniert perfekt: Binden Sie zuerst das Ladeereignis
Kevin C.
16

Das Hauptproblem besteht darin, dass WebKit-Browser (Safari und Chrome) JavaScript- und CSS-Informationen parallel laden. Daher kann JavaScript ausgeführt werden, bevor die Styling-Effekte von CSS berechnet wurden, und die falsche Antwort zurückgeben. In jQuery habe ich festgestellt, dass die Lösung darin besteht, zu warten, bis 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) 

Was Breite und Höhe angeht ... Je nachdem, was Sie tun, möchten Sie möglicherweise OffsetWidth und OffsetHeight, einschließlich Rahmen und Polsterung.

Cugel
quelle
Ja, das ist der Grund. Eine bessere Problemumgehung besteht darin, das Ladeereignis von jQuery zu verwenden.
Frank Bannister
6
$(window).load(function(){ ... });half in meinem Fall
kolypto
16

In der akzeptierten Antwort wird viel über ein Problem diskutiert, bei dem das onloadEreignis nicht ausgelöst wird, wenn ein Bild aus dem WebKit-Cache geladen wird.

In meinem Fall werden onloadzwischengespeicherte Bilder ausgelöst, aber Höhe und Breite sind immer noch 0. Eine einfache setTimeoutLösung hat das Problem für mich behoben:

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

Ich kann nicht sagen, warum das onloadEreignis ausgelöst wird, selbst wenn das Bild aus dem Cache geladen wird (Verbesserung von jQuery 1.4 / 1.5?) - aber wenn dieses Problem weiterhin auftritt, wird möglicherweise eine Kombination aus meiner Antwort und der var src = img.src; img.src = ""; img.src = src;Technik angezeigt Arbeit.

(Beachten Sie, dass ich mir für meine Zwecke keine Gedanken über vordefinierte Dimensionen mache, weder in den Attributen des Bildes noch in den CSS-Stilen. Möglicherweise möchten Sie diese jedoch gemäß der Antwort von Xavi entfernen. Oder klonen Sie das Bild.)

JKS
quelle
Ich hatte genau dieses Problem mit IE7 & IE8. setTimeout () hat für mich in diesen Browsern funktioniert. Danke dir!
Vasile Tomoiaga
11

Dies funktioniert für mich (Safari 3.2), indem ich aus dem window.onloadEvent heraus feuere:

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

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

  alert( pic.width() );
  alert( pic.height() );
});
Owen
quelle
Ja! Funktionierte nicht mit $ (document) .ready (function () {}); Vielen Dank! Das Bild muss vollständig geladen sein, bevor es gelesen werden kann. Na sicher.
Frank Bannister
8

Sie können das Bild programmgesteuert abrufen und die Abmessungen mit Javascript überprüfen, ohne sich mit dem DOM herumschlagen zu müssen.

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
quelle
2
Dies ist die beste Lösung! Dies funktioniert auch dann, wenn das Bild nicht vorinstalliert oder zwischengespeichert ist.
Marlar
6

Was ist mit image.naturalHeightund image.naturalWidthEigenschaften?

Scheint gut zu funktionieren, einige Versionen in Chrome, Safari und Firefox, aber überhaupt nicht in IE8 oder sogar IE9.

Andrew Mackenzie
quelle
Das funktioniert in meinem Fall nicht.
gib
5

Wie wir die richtigen realen Dimensionen ohne ein blinkendes reales Bild erhalten:

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

Es funktioniert mit <img class = "toreaddimensions" ...

Fuchs
quelle
5

Jquery hat zwei Eigenschaften namens naturalWidth und naturalHeight, die Sie auf diese Weise verwenden können.

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

Wobei my-img ein Klassenname ist, mit dem mein Bild ausgewählt wird.

Samuel Santos
quelle
2
Dies sind keine jQuery-Methoden. naturalWidth(und Höhe) sind Eigenschaften des Bildelementobjekts. developer.mozilla.org/en/docs/Web/API/HTMLImageElement
Sandstrom
3

Wie bereits erwähnt, funktioniert die Xavi-Antwort nicht, wenn sich Bilder im Cache befinden. Das Problem reagiert darauf, dass das Webkit das Ladeereignis für zwischengespeicherte Bilder nicht auslöst. Wenn also die Breiten- / Höhenattrs im img-Tag nicht explizit festgelegt sind, können Sie die Bilder nur dann zuverlässig abrufen, wenn das window.loadEreignis ausgelöst wird.

Das window.loadEreignis wird immer ausgelöst , so dass Sie sicher und ohne Trick auf die Breite / Höhe von und danach zugreifen können.

$(window).load(function(){

   //these all work

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

});

Wenn Sie die Größe dynamisch geladener Bilder ermitteln müssen, die möglicherweise zwischengespeichert werden (zuvor geladen), können Sie die Xavi-Methode plus eine Abfragezeichenfolge verwenden, um eine Cache-Aktualisierung auszulösen. Der Nachteil ist, dass es eine weitere Anforderung an den Server für ein Bild gibt, das bereits zwischengespeichert ist und bereits verfügbar sein sollte. Dummes 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: Wenn Sie bereits einen QueryString img.srchaben, müssen Sie ihn analysieren und den zusätzlichen Parameter hinzufügen, um den Cache zu leeren.

xmarcos
quelle
1
Der erste Codeblock erhält nur die Abmessungen eines Elements im geladenen DOM, nicht eines Bildes selbst ...
BasTaller
1
Dies ist genau die schnellste und effektivste Lösung. Kein Plugin, kein Trick! Ich werde eine ähnliche Antwort posten, aber deine gefunden haben.
Vantrung-Cuncon
2

Wie Luke Smith sagt, ist das Laden von Bildern ein Chaos . Es ist nicht in allen Browsern zuverlässig. Diese Tatsache hat mir große Schmerzen bereitet. Ein zwischengespeichertes Bild löst das Ereignis in einigen Browsern überhaupt nicht aus. Daher sind diejenigen falsch, die sagten, dass das Laden von Bildern besser ist als setTimeout.

Luke Smiths Lösung ist hier.

Und es gibt eine interessante Diskussion darüber, wie dieses Durcheinander in jQuery 1.4 behandelt werden könnte.

Ich habe festgestellt, dass es ziemlich zuverlässig ist, die Breite auf 0 zu setzen und dann zu warten, bis die Eigenschaft "complete" wahr wird und die Eigenschaft width größer als Null ist. Sie sollten auch auf Fehler achten.

Nosredna
quelle
Der zweite Link in der Antwort ist tot.
Pang
2
$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

Aus Chris 'Kommentar: http://api.jquery.com/load-event/

Jerome Jaglale
quelle
2

Meine Situation ist wahrscheinlich etwas anders. Ich ändere dynamisch den Quellcode eines Bildes über Javascript und muss sicherstellen, dass das neue Bild proportional zu einem festen Container (in einer Fotogalerie) passt. Ich habe zunächst nur die Attribute width und height des Bildes nach dem Laden (über das Ladeereignis des Bildes) entfernt und diese nach Berechnung der bevorzugten Abmessungen zurückgesetzt. Dies funktioniert jedoch nicht in Safari und möglicherweise im Internet Explorer (ich habe es im Internet Explorer nicht gründlich getestet, aber das Bild wird nicht einmal angezeigt, also ...).

Auf jeden Fall behält Safari die Abmessungen des vorherigen Bildes bei, sodass die Abmessungen immer ein Bild dahinter liegen. Ich gehe davon aus, dass dies etwas mit dem Cache zu tun hat. Die einfachste Lösung besteht also darin, das Bild einfach zu klonen und dem DOM hinzuzufügen (es ist wichtig, dass es dem DOM hinzugefügt wird, um das With und die Höhe zu erhalten). Geben Sie dem Bild den Sichtbarkeitswert "Versteckt" (verwenden Sie "Anzeige keine", da dies nicht funktioniert). Nachdem Sie die Dimensionen erhalten haben, entfernen Sie den Klon.

Hier ist mein Code mit 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);

Diese Lösung funktioniert auf jeden Fall.

Duane Comeaux
quelle
1

Vor kurzem musste ich Breite und Höhe finden, um die Standardgröße von .dialog für das Diagramm festzulegen. Die von mir verwendete Lösung war:

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

Für mich funktioniert das in FF3, Opera 10, IE 8,7,6

PS Möglicherweise finden Sie weitere Lösungen in einigen Plugins wie LightBox oder ColorBox

SDemonUA
quelle
1

Um Xavis Antwort zu ergänzen, bietet Paul Irishs Github David Desandros Gitgub eine Funktion namens imagesLoaded () , die nach denselben Prinzipien arbeitet und das Problem umgeht, dass die zwischengespeicherten Bilder einiger Browser das Ereignis .load () nicht auslösen (mit cleverem original_src ->) data_uri -> original_src umschaltung).

Es ist weit verbreitet und wird regelmäßig aktualisiert, was dazu beiträgt, dass es die robusteste Lösung für das Problem ist, IMO.

RobW
quelle
1
Eine aktualisierte Version der imagesLoadedFunktion finden Sie hier: github.com/desandro/imagesloaded
bejonbee
Ja, David Desandro ist jetzt Gastgeber der Veranstaltung. Vielen Dank, dass Sie mich an @somethingkindawierd erinnert haben und meine Antwort aktualisiert haben.
RobW
1

Dies funktioniert sowohl für zwischengespeicherte als auch für dynamisch geladene Bilder.

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

So verwenden Sie dieses Skript:

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
quelle
1

Ich habe einige Umgehungsfunktionen mit dem JQuery-Plugin imagesLoaded ausgeführt: 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}));
            },

Sie können dies verwenden, indem Sie URL, Funktion und deren Kontext übergeben. Die Funktion wird ausgeführt, nachdem das Bild geladen wurde und das erstellte Bild mit seiner Breite und Höhe zurückgegeben wurde.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
Zdeněk Mlčoch
quelle
1

Wenn das Bild bereits verwendet wird, sollten Sie Folgendes tun:

  1. Setzen Sie die Bildsimulationen auf initial

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

  2. Abmessungen erhalten

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

Sebastián Rojas
quelle
1

Sie können die Eigenschaften naturalWidth und naturalHeight des HTML-Bildelements verwenden. (Hier gibt es mehr Infos ).

Sie würden es so verwenden:

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

Es scheint, dass dies in allen Browsern funktioniert, außer im IE ab Version 8.

Jair Reina
quelle
Ja, nicht mehr IE8: D
Jair Reina
0

Ich habe die Antwort von Dio überprüft und es funktioniert großartig für mich.

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

Stellen Sie sicher, dass Sie auch alle Ihre Funktionen aufrufen. dieses Handle mit der Bildgröße in der Recaller-Funktion von fadeIn ().

Danke dafür.

Republik
quelle
0

Ich benutze einen anderen Ansatz, rufe einfach Ajax an den Server, um die Bildgröße zu ermitteln, wenn das Bildobjekt verwendet wird.

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

und natürlich serverseitigen Code:

<?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
quelle
1
Dies ist keine großartige Lösung und dauert aufgrund des AJAX-Ladevorgangs länger als jede andere Lösung.
halfpastfour.am
0

Dies funktioniert browserübergreifend

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

Holen Sie sich die Dimensionen mit

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

Prost!

Foxybagga
quelle
0

Ein weiterer Vorschlag ist die Verwendung des imagesLoaded-Plugins .

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
Gadelkareem
quelle
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);
                            }
                        }); 

// Dieser Code hilft, Bilder mit einer Abmessung von 200 * 274 anzuzeigen

Eranda
quelle
0

Hier ist eine browserübergreifende Lösung, die ein Ereignis auslöst, wenn Ihre ausgewählten Bilder geladen werden: http://desandro.github.io/imagesloaded/ Sie können die Höhe und Breite in der Funktion imagesLoaded () nachschlagen.

Paul Mason
quelle
0

Stolperte über diesen Thread und versuchte eine Antwort auf meine eigene Frage zu finden. Ich habe versucht, die Breite / Höhe eines Bildes in einer Funktion NACH dem Lader zu ermitteln, und habe immer wieder 0 gefunden. Ich habe jedoch das Gefühl, dass dies das ist, wonach Sie suchen, da es für mich funktioniert:

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
quelle
0

Schauen Sie sich dieses Repository in Github an!

Tolles Beispiel, um die Breite und Höhe mit Javascript zu überprüfen

https://github.com/AzizAK/ImageRealSize

--- Bearbeitet wird von einigen Kommentaren angefordert ..

Javascript-Code:

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

und HTML-Code:

<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
quelle
Wenn möglich, können Sie hier auch einige Codezeilen hinzufügen. als Links könnten sich im Laufe der Zeit ändern
Tejus Prasad
-1

Für Funktionen, bei denen Sie die ursprüngliche Platzierung oder das Bild nicht ändern möchten.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
Davin
quelle
1
Das funktioniert absolut nicht. Es wird für beide undefiniert zurückkehren
Chris Cinelli