Узнать размеры картинки jQuery
Здравствуйте! Уже несколько дней бьюсь над проблемой получить размеры загруженной картинки во всех браузерах.
Код такой var href = "картинка.jpg"; var img = new Image(); img.src = href; var imgWidth = img.width; //длина картинки*/ alert(imgWidth); imgWidth срабатывает когда уже картинка была загружена ранее, т.е. кэширована браузером. С помощью функции
Img.onload = function() {
....
}
результатов не дало, перелопатил инет, различные примеры результата не дали. Надеюсь на вашу помощь... |
Цитата:
|
var href = "картинка.jpg";
var img = new Image();
var imgWidth;
img.onload = function() {
img.src = href;
alert(this.width + 'x' + this.height); // здесь работает
imgWidth = this.width;
}
alert(imgWidth + 'x'); // здесь не работает
|
img.src = href; это надо делать не в обработчике события load. |
Хоть и с опозданием на 2 года, но т.к. попал на тему с поисковика, думаю будет актуально и для других, вот рабочий код (у меня):
var href = "картинка.jpg",
imgWidth,
img = new Image();
img.onload = function(){
alert(img.width + 'x' + img.height); // здесь работает
imgWidth = img.width;
}
img.src = href;
// Здесь не заработает, т.к. переменная imgWidth пустая..., она
//заполнится после загрузки картинки, а алерт сработает сразу.
alert(imgWidth + 'x'); // здесь не работает
// Делаем так:
window.onload = function(){
alert(imgWidth + 'x'); // здесь работает
// Вызывается после полной загрузки страницы.
// (картинки, css, js, html и прочего) все-все...
}
|
Цитата:
(function (global, name, def) {
if (typeof (define) == 'function' && define['amd']) define(name, def);
else global[name] = def();
}) (this, 'loadImage', function () {
return function (imageSrc, done) {
var q = new Promise(function (res, rej) {
var img = new Image();
img.src = imageSrc;
img.onerror = function (e) {
rej(e);
};
img.onload = function (e) {
res(img);
};
if (img.complete) res(img);
});
return q;
}
});
loadImage('http://upload.wikimedia.org/wikipedia/ru/8/8d/ImageComicsLogo.gif').then(function (img) {
alert('Картинка: ' + img);
}, function (e) {
alert('Ошибка при загрузке картинки: ' + e);
});
|
;) на всякий случай http://caniuse.com/#search=Promise
|
Цитата:
https://github.com/jakearchibald/es6-promise :dance: жаль, что с flexbox так просто нельзя обойтись |
Мне кажется что так само просто. Чем некоторый огород что тут нагородили :)
function imgSize(href){
var img = new Image();
img.src = href;
img.onload = function() {
return img;
};
return img;
}
var imgZz = imgSize('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
alert('ширина: '+imgZz.width+';');
alert('Высота: '+imgZz.height+';');
|
psfdek, и что это? onload асинхронно выполняется.
|
Я автор данной темы. Создал ее еще 3 года назад.
psfdek, тот код который Вы предложили будет работать только если картинка уже отображалась ранее в браузере, т.е. была кэширована. Об этом кстати я и написал в первом сообщении 3 года назад. Правильно будет так:
var href = "http://upload.wikimedia.org/wikipedia/ru/8/8d/ImageComicsLogo.gif";
var img = new Image();
img.onload = function()
{
var intImageWidth = this.width;
var intImageHeight = this.height;
alert(intImageWidth + "px; " + intImageHeight + "px;");
}
img.src = href;
|
Подскажите почему так происходит
function imgSize(href){
var img = new Image();
img.src = href;
img.onload = function() {
return img;
};
return img;
}
y=URL.createObjectURL(files[index]);
var imgZz = imgSize(y);
alert();
console.log(imgZz.width);
console.log(imgZz.height);
Если из кода убрать - alert();, тогда размеры не выводяться. НО! если поставить alert();, тогда размеры выводятся как положено и их можно передавать дальше. У меня проблема в том что размеру нужны для дальнейшей работы с изображением, а не просто для их вывода. А выводить alert(); после каждого изображение не есть выход. может есть какой-то аналог alert(); или событие которое должно произойти, после чего я смогу получить размеры Подскажите пжлста |
just_do_it,
в 6 строке вы получите размер. алерт нужен чтоб вы дождались ответа сервера. мыслить асинхронно. |
Цитата:
но как мне добиться получения размеров в 15 и 16 строках без алерта?:thanks: |
Размер ты получишь не раньше, чем загрузится картинка. Следовательно только когда она загрузится, можно получить размер. Иными словами когда картинка загрузится, ты получишь размер, то есть не раньше чем она загрузится, ибо до этого момента измерять нечего. Дошло?
img.onload = function(){
console.log(this.width);
console.log(this.height);
};
|
warren buffet, все теперь понял)), спс
|
| Часовой пояс GMT +3, время: 13:07. |