JavaScript: pobierz wymiary obrazu

97

Mam tylko adres URL do obrazu. Muszę określić wysokość i szerokość tego obrazu, używając tylko JavaScript. Obraz nie może być widoczny dla użytkownika na stronie. Jak mogę uzyskać jego wymiary?

javascript html image

— JQueeeer
źródło

2

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

— stecb

1

w rzeczywistości ta odpowiedź jest jedyną naprawdę poprawną, ponieważ musisz poczekać, aż obraz zostanie załadowany.

— Shadow Wizard is Ear For You

198

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
źródło

1

Chyba że musisz uzyskać wymiary synchronicznie. W takim przypadku wystarczy wstawić obraz do dokumentu (używając pozycji bezwzględnej gdzieś poza rzutnią) - wtedy wymiary są dostępne zaraz po wywołaniu document.appendChild ().

— JustAndrei

1

Dlaczego onloadprzed ustawieniem adresu URL obrazu?

— Ajay Gaur

23

@AjayGaur, ponieważ onloadjest odbiornikiem, który będzie wywoływany asynchronicznie, jeśli obraz zostanie poprawnie załadowany. Jeśli ustawisz odbiornik po ustawieniu adresu URL, obraz może zostać załadowany tuż przed tym, jak kod osiągnie ustawienie samego ładowania, co spowoduje, że odbiornik nigdy nie zostanie wywołany. Posługując się analogiami, jeśli podajesz sobie szklankę z wodą, czy najpierw nalewasz wodę, a następnie stawiasz szklankę, aby ją napełnić? A może najpierw stawiasz szklankę, a potem wlewasz wodę?

— biomorgoth

3

img.naturalWidth i img.naturalHeight to poprawna odpowiedź

— Kamlesh

1

Dziękuję @Kamlesh. Potrzebowałem naturalnych wymiarów.

— jahooma

43

Zrób nowy Image

var img = new Image();

Ustaw src

img.src = your_src

Pobierz widthiheight

//img.width
//img.height

— nc3b
źródło

17

Ciągle otrzymuję 0 dla szerokości i wysokości, używając tego dokładnego kodu.

— Adam Casey,

11

Wygląda na to, że obraz musi się załadować, co ma sens.

— Adam Casey,

3

dodatkowe informacje - chociaż zadziałało to dla mnie za pierwszym razem, było to sporadyczne. Myślę, że problem polega na tym, że obraz nie został pobrany. Naprawiłem, uruchamiając kod, który używa wymiaru w obsłudze zdarzeń onload w następujący sposób: img.onload = function () {};

— Shumii,

3

Ten kod działa, o ile obraz znajduje się w pamięci podręcznej przeglądarki. Gdy pamięć podręczna jest nieprawidłowa lub usunięta. To nie zadziała. Więc niezbyt wiarygodne.

— bharatesh

2

To nie działa, ponieważ obraz nie został jeszcze załadowany - ładowanie obrazu odbywa się asynchronicznie, więc musisz poczekać na zdarzenie ładowania.

— user1702401

5

Używa funkcji i czeka na jej zakończenie.

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

— David Dunham
źródło

1

Dlaczego ta funkcja wielokrotnego użytku z odroczeniami miałaby zostać odrzucona ?!

— David Dunham

„używając tylko JavaScript” i to chyba jQuery

— Apolo,

Dostajesz ode mnie głosy za, chociaż używa jQuerry. Liczy się podejście.

— krankuba

2

naturalWidth i 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
źródło

1

Uzyskaj rozmiar obrazu dzięki jQuery

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

Uzyskaj rozmiar obrazu za pomocą JavaScript

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

Uzyskaj rozmiar obrazu za pomocą JavaScript (nowoczesne przeglądarki, IE9 +)

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

Użyj powyższego po prostu jako: getMeta (" http://example.com/img.jpg ");

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

— Sunny Mahajan
źródło

0

Podobne pytanie zadane i udzielone przy użyciu JQuery tutaj:

Uzyskaj wysokość szerokości zdalnego obrazu z adresu 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
źródło

0

jeśli masz plik obrazu z formularza wejściowego. możesz używać w ten sposób

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
źródło

-3

Poniższy kod dodaje wysokość i szerokość atrybutu obrazu do każdego obrazu na stronie.

<!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
źródło

13

Pytanie dotyczyło uzyskania wymiarów obrazu bez pokazywania obrazu użytkownikowi. Ustawianie atrybutów szerokości i wysokości obrazu po wyświetleniu obrazu nie ma absolutnie żadnego sensu.

— Yaroslav Stavnichiy