Действительно ли JavaScript может получить доступ к собственному размеру изображения?
Эта ветка дала мне некоторое представление о том, как instanceof отличается от isAssignableFrom, поэтому я решил поделиться чем-то своим.
Я обнаружил, что использование isAssignableFrom является единственным (возможно, не единственным, но, возможно, самым простым) способом спросить себя, может ли ссылка на один класс брать экземпляры другого, когда у одного есть экземпляры ни одного класса сделать сравнение.
Следовательно, я не нашел, что использование оператора instanceof для сравнения присваиваемости было бы хорошей идеей, когда у меня были только классы, если только я не собирался создавать экземпляр из одного из классов; Я думал, что это будет небрежно.
4 ответа
Современные браузеры
Когда я писал этот ответ еще в 2009 году, ландшафт браузеров был совсем другим. В настоящее время любой достаточно современный браузер поддерживает предложение Пима Ягера с использованием 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's 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);
Это должно работать:
var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;
NaturalWidth и naturalHeight возвращают размер ответа изображения, а не размер отображения.
Согласно комментарию Джоша, кроссбраузерность не поддерживается, это может быть правильно, я тестировал это в FF3
РЕДАКТИРОВАТЬ - новая идея ... см. http://jsbin.com/uzoza
var fixedW = $("#imageToTest").width();
$("#imageToTest").removeAttr("width");
var realW = $("#imageToTest").width();
$("#imageToTest").attr("width", fixedW);
ОРИГИНАЛЬНЫЙ ОТВЕТ
см. Как получить размер изображения (высоту и width) с помощью JavaScript?
var img = $('#imageid');
var width = img.clientWidth;
var height = img.clientHeight;
Моим решением было бы написать веб-службу, которая получает / загружает изображение, а затем получает его разрешение и возвращает его как {width: x, height: y}. Затем вы вызываете его с помощью $ .ajax или его эквивалента, чтобы получить это.
В качестве альтернативы вы можете добавить изображение в скрытый div, используя
// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");
, а затем получить ширину / высоту div, хотя я не пробовал.