JavaScript: pobierz wymiary obrazu

Question 1

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?

Question 2

var img = new Image();

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

  // code here to use the dimensions
}

img.src = url;

Question 3

Zrób nowy Image

var img = new Image();

Ustaw src

img.src = your_src

Pobierz widthiheight

//img.width
//img.height

Question 4

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

Question 5

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

Question 6

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

Question 7

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

Question 8

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

Question 9

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>

Answer 1

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

Answer 2

2

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

stecb

Answer 3

1

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

Shadow Wizard is Ear For You

Answer 4

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

Answer 5

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

Answer 6

1

Dlaczego onloadprzed ustawieniem adresu URL obrazu?

Ajay Gaur

Answer 7

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

Answer 8

3

img.naturalWidth i img.naturalHeight to poprawna odpowiedź

Kamlesh

Answer 9

1

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

jahooma

Answer 10

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

Answer 11

17

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

Adam Casey,

Answer 12

11

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

Adam Casey,

Answer 13

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,

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

1

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

David Dunham

Answer 18

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

Apolo,

Answer 19

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

krankuba

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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>

Answer 25

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

JavaScript: pobierz wymiary obrazu

Odpowiedzi: