JavaScript: ottieni le dimensioni dell'immagine

95

Ho solo un URL per un'immagine. Devo determinare l'altezza e la larghezza di questa immagine utilizzando solo JavaScript. L'immagine non può essere visibile all'utente sulla pagina. Come posso ottenere le sue dimensioni?

javascript html image

— JQueeeer
fonte

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

in realtà questa risposta è l'unica veramente corretta, in quanto devi aspettare che l'immagine venga caricata.

— Shadow Wizard is Ear For You

196

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

— Shumii
fonte

1

A meno che non sia necessario ottenere le dimensioni in modo sincrono. In quel caso devi solo inserire l'immagine nel documento (usando una posizione assoluta da qualche parte al di fuori del viewport) - quindi le dimensioni sono disponibili subito dopo aver chiamato document.appendChild ().

— JustAndrei

1

Perché è onloadprima di impostare l'URL dell'immagine?

— Ajay Gaur

23

@AjayGaur perché onloadè un listener che verrà chiamato in modo asincrono se l'immagine viene caricata correttamente. Se si imposta il listener dopo aver impostato l'URL, l'immagine potrebbe caricarsi appena prima che il codice raggiunga l'impostazione dell'onload stesso, con il risultato che il listener non viene mai chiamato. Usando analogie, se ti stai servendo un bicchiere con acqua, prima versi l'acqua e poi metti il bicchiere per riempirlo? Oppure metti prima il bicchiere e poi versi l'acqua?

— biomorgoth

2

img.naturalWidth e img.naturalHeight è la risposta corretta

— Kamlesh

Grazie @Kamlesh, avevo bisogno delle dimensioni naturali.

— jahooma

43

Creane uno nuovo Image

var img = new Image();

Impostare il src

img.src = your_src

Ottieni il widthe ilheight

//img.width
//img.height

— nc3b
fonte

17

Continuo a ottenere 0 per larghezza e altezza, usando questo codice esatto.

— Adam Casey

11

Sembra che l'immagine debba caricarsi, il che ha senso.

— Adam Casey

3

informazioni aggiuntive - anche se questo ha funzionato per me la prima volta, era intermittente. Penso che il problema sia perché l'immagine non è stata scaricata. Ho risolto eseguendo il codice che utilizza la dimensione nel gestore di eventi onload in questo modo: img.onload = function () {};

— Shumii

3

Questo codice funziona, purché l'immagine sia nella cache del browser. Una volta che la cache non è valida o è stata eliminata. Non funzionerà. Quindi non proprio affidabile.

— bharatesh

2

Non funziona, poiché l'immagine non è ancora caricata: il caricamento dell'immagine viene eseguito in modo asincrono, quindi è necessario attendere l'evento di caricamento.

— user1702401

5

Questo utilizza la funzione e attende che venga completata.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

— DavidDunham
fonte

1

Perché questa funzione riutilizzabile con deferrant dovrebbe essere sottovalutata ?!

— DavidDunham

'usando solo JavaScript' e questo è jQuery, immagino

— Apolo

Ricevi voti positivi da me anche se utilizza jQuerry. L'approccio è quello che conta.

— krankuba

2

naturalWidth e naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

— Bitterblue
fonte

1

se hai un file immagine dal modulo di input. puoi usare in questo modo

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

— Raka Adi Nugroho
fonte

0

Domanda simile posta e risposta utilizzando JQuery qui:

Ottieni l'altezza della larghezza dell'immagine remota dall'URL

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

— Luke Knepper
fonte

0

Ottieni la dimensione dell'immagine con jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Ottieni la dimensione dell'immagine con JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Ottieni le dimensioni dell'immagine con JavaScript (browser moderni, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Usa quanto sopra semplicemente come: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

— Sunny Mahajan
fonte

-3

Il codice seguente aggiunge l' altezza e la larghezza dell'attributo dell'immagine a ciascuna immagine sulla pagina.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

— Testere
fonte

13

La domanda riguardava l'acquisizione delle dimensioni dell'immagine senza mostrare l'immagine all'utente. L'impostazione degli attributi di larghezza e altezza dell'immagine dopo che l'immagine è stata visualizzata non ha assolutamente senso.

— Yaroslav Stavnichiy