Может ли Javascript получить доступ к размеру собственного изображения?

Я пишу функцию jQuery, где я хотел бы получить доступ как к собственному размеру изображения, так и к размеру, указанному для него на странице. Я хотел бы установить переменную для каждого.

Как это делается?

Ответ 1

Современные браузеры

Когда я написал этот ответ еще в 2009 году, пейзаж браузера был совсем другим. В настоящее время любой разумно современный браузер поддерживает предложение Pim Jager с помощью img.naturalWidth и img.naturalHeight. Посмотрите на его ответ.

Унаследованный ответ, совместимый с супер-старыми браузерами

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

Ответ 2

Это должно работать:

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

NaturalWidth и naturalHeight возвращают размер ответа изображения, а не размер дисплея.

Согласно комментарию Джоша, это не поддерживается кросс-браузер, это может быть правильно, я проверил это в FF3

Ответ 3

EDIT - новая идея... см. http://jsbin.com/uzoza

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

ОРИГИНАЛЬНЫЙ ОТВЕТ

см. Как получить размер изображения (высота и ширина) с помощью JavaScript?

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

Ответ 4

Я добавляю способ сделать это и быть уверенным, что есть поддержка для всех браузеров. Практически все браузеры поддерживают naturalWidth и naturalHeight, за исключением Internet Explorer 8 и ниже.

Так как IE 8 и ниже возвращают размер видимого изображения, а не естественный размер при попытке извлечь значения размера, для получения полноразмерных размеров, полученных от пример Джека Мура.

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

Я установил это для поддержки передачи значения идентификатора изображения или имени идентификатора.

Использование:

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

Или

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

Обязательно убедитесь, что изображение загружено перед вызовом этого, будь то с помощью onload или триггера при добавлении его в DOM.

Протестировано с помощью: Windows XP - Firefox 1.5, IE 8 Windows 7 - IE 9, Chrome 56 Android 6.0.1 - Chrome 50 Android 5.1.1 - Opera Mini 7.6, Dolphin 10.3

Полный пример кода:

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>

Ответ 5

Моим решением было бы написать веб-службу, которая получает/загружает изображение, а затем получает его разрешение и возвращает его как {width: x, height: y}. Затем вы вызываете его с $.ajax или эквивалентом, чтобы получить это.

В качестве альтернативы вы можете добавить изображение в скрытый div, используя

// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");

И затем получите ширину/высоту div, хотя я не пробовал ее.