JavaScript: получить размеры изображения

97

У меня есть только URL-адрес изображения. Мне нужно определить высоту и ширину этого изображения, используя только JavaScript. Изображение не может быть видно пользователю на странице. Как мне узнать его размеры?

javascript html image

— JQueeeer
источник

2

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

— stecb

1

на самом деле этот ответ является единственно правильным, так как вам нужно дождаться загрузки изображения.

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

— Шумий
источник

1

Если только вам не нужно получать размеры синхронно. В этом случае вам просто нужно вставить изображение в документ (используя абсолютную позицию где-то вне области просмотра) - тогда размеры будут доступны сразу после вызова document.appendChild ().

— JustAndrei

1

Почему onloadперед установкой URL-адреса изображения?

— Аджай Гаур

23

@AjayGaur, потому что onloadэто слушатель, который будет вызываться асинхронно, если изображение загружено правильно. Если вы установите прослушиватель после установки URL-адреса, изображение может загрузиться непосредственно перед тем, как код достигнет установки самой onload, в результате чего прослушиватель никогда не будет вызван. Используя аналогии, если вы подаете себе стакан с водой, вы сначала наливаете воду, а затем ставите стакан, чтобы наполнить его? Или сначала ставишь стакан, а потом наливаешь воду?

— biomorgoth

3

img.naturalWidth и img.naturalHeight правильный ответ

— Kamlesh

1

Спасибо @Kamlesh, мне нужны были натуральные размеры.

— jahooma

43

Сделайте новый Image

var img = new Image();

Установить src

img.src = your_src

Получите widthиheight

//img.width
//img.height

— nc3b
источник

17

Я продолжаю получать 0 для ширины и высоты, используя этот точный код.

— Адам Кейси

11

Кажется, изображение должно загрузиться, что имеет смысл.

— Адам Кейси

3

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

— Шуми

3

Этот код работает, пока изображение находится в кеше браузера. Как только кеш недействителен или удален. Это не сработает. Так что не очень надежно.

— bharatesh 06

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

Получить размер изображения с помощью 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

— Солнечный Махаджан
источник

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

если у вас есть файл изображения из формы ввода. вы можете использовать это

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

— Рака Ади Нугрохо
источник

-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

Вопрос заключался в получении размеров изображения без показа изображения пользователю. Установка атрибутов ширины и высоты изображения после того, как изображение было отображено, не имеет абсолютно никакого смысла.

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