JavaScript: Отримайте розміри зображення

95

У мене є лише URL-адреса зображення. Мені потрібно визначити висоту та ширину цього зображення, використовуючи лише JavaScript. Зображення не може бути видимим для користувача на сторінці. Як я можу отримати його розміри?

javascript html image

— JQueeeer
джерело

2

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

— stecb

1

насправді ця відповідь є єдиною дійсно правильною, оскільки вам потрібно почекати, поки зображення завантажиться.

— Майстер тіней - вухо для вас

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;

— Шумії
джерело

1

Якщо вам не потрібно отримувати розміри синхронно. У цьому випадку вам просто потрібно вставити зображення в документ (використовуючи абсолютну позицію десь за межами області перегляду) - тоді розміри доступні відразу після виклику document.appendChild ().

— JustAndrei

1

Чому onloadдо, ніж встановлення URL-адреси зображення?

— Аджай Гаур,

23

@AjayGaur, тому що onloadє слухачем, який буде викликаний асинхронно, якщо зображення завантажено правильно. Якщо ви встановите прослуховувач після встановлення URL-адреси, зображення може завантажитися безпосередньо перед тим, як код досягне встановлення самого завантаження, в результаті чого прослуховувач ніколи не буде викликаний. За аналогією, якщо ви подаєте собі склянку з водою, чи спочатку ви виливаєте воду, а потім ставите склянку, щоб наповнити? Або ви спочатку ставите склянку, а потім наливаєте воду?

— biomorgoth

2

img.naturalWidth і img.naturalHeight правильну відповідь

— Kamlesh

Дякую @Kamlesh Мені потрібні були природні розміри.

— jahooma

43

Зробіть нову Image

var img = new Image();

Встановіть src

img.src = your_src

Отримайте widthіheight

//img.width
//img.height

— nc3b
джерело

17

Я продовжую отримувати 0 для ширини та висоти, використовуючи саме цей код.

— Адам Кейсі,

11

Здається, зображення має завантажуватися, що має сенс.

— Адам Кейсі,

3

додаткова інформація - хоча це спрацювало для мене вперше, воно було з перебоями Думаю, проблема в тому, що зображення не завантажено. Я виправив, запустивши код, який використовує вимір у обробнику події завантаження, наприклад: img.onload = function () {};

— Шумії

3

Цей код працює, доки зображення знаходиться в кеші браузера. Як тільки кеш недійсний або видалений. Це не спрацює. Тож не дуже надійний.

— bharatesh

2

Це не працює, оскільки зображення ще не завантажено - завантаження зображення виконується асинхронно, тому вам доведеться чекати події завантаження.

— user1702401

5

При цьому використовується функція і чекає її завершення.

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

— Девід Данхем
джерело

1

Чому б цю функцію багаторазового використання із затримками відхилити ?!

— DavidDunham

"використовуючи лише JavaScript", і це, мабуть, jQuery

— Аполо

Ви отримуєте голос за мене, хоча він використовує jQuerry. Важливий підхід.

— krankuba

2

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

— Гіркий блакитний
джерело

1

якщо у вас є файл зображення із вашої форми введення. ви можете використовувати так

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

— Рака Аді Нугрохо
джерело

0

Подібне запитання і відповіді за допомогою JQuery тут:

Отримати висоту ширини віддаленого зображення з 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");

— Люк Кнеппер
джерело

0

Отримайте розмір зображення за допомогою jQuery

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

Отримайте розмір зображення за допомогою JavaScript

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

Отримайте розмір зображення за допомогою JavaScript (сучасні браузери, IE9 +)

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

Використовуйте вищезазначене просто як: getMeta (" http://example.com/img.jpg ");

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

— Сонячний Махаджан
джерело

-3

Наступний код додає висоту та ширину атрибута зображення до кожного зображення на сторінці.

<!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>

— Тестер
джерело

13

Питання полягало в отриманні розмірів зображення без показу зображення користувачеві. Встановлення атрибутів ширини та висоти зображення після відображення зображення абсолютно не має сенсу.

— Ярослав Ставничий