Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   resize изображения и аналог getimagesize() (https://javascript.ru/forum/misc/34346-resize-izobrazheniya-i-analog-getimagesize.html)

Vdomah 30.12.2012 16:31

не знаю зачем Вы мне эти ссылки кинули, но я допер в чем проблема. Просто надо при задании параметров
if (is.width > is.height) largeImg.width = '500';
    else largeImg.height = '500';

удалять заданный ранее, а то получается квадрат. спасибо всем за помощь!

#largeImg {
09 /*width: 500px;*/
10 /* height: 400px;*/
11 display: block;
12 margin: auto;

закомментил - ничего не поменялось

Vdomah 30.12.2012 16:44

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}

Типа того.
Цитата:

А может всётаки сравнивать размеры нужно приходящего изображения ,после его полного получения.
Это да, а то сейчас правильный размер ставится только после второго нажатия по thumb.

dmitriymar 30.12.2012 16:46

Цитата:

Сообщение от Vdomah
не знаю зачем Вы мне эти ссылки кинули, но я допер в чем проблема. Просто надо при задании параметров

Цитата:

Сообщение от Vdomah
удалять заданный ранее, а то получается квадрат. спасибо всем за помощь!

странно -у вас вышло? я удивлён :)
Цитата:

Сообщение от dmitriymar
-не нужно высоту или ширину предварительно задавать у тега вообще.

а в этих ссылках разве нет как работают атрибуты ширина и высота?
а по ссылкам нужно всётаки ознакомиться

Цитата:

Сообщение от Vdomah
но я допер в чем проблема.

Не доперли вы в чём проблема . Вобще ни капли не доперли

Цитата:

Сообщение от Vdomah
Это да, а то сейчас правильный размер ставится только после второго нажатия по thumb.

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

Deff 30.12.2012 17:07

if(Math.round(largeImg.height)/Math.round(largeImg.width) > 550/550) {largeImg.height='550px';largeImg.width="auto"}

Vdomah 30.12.2012 17:41

Цитата:

Сообщение от Vdomah (Сообщение 224378)
function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}



Это да, а то сейчас правильный размер ставится только после второго нажатия по thumb.

dmitriymar, никакого сарказма. Вы здесь правильную идею дали. Надо было просто строчку
var is = getImageSize( 'largeImg');
поставить после загрузки изображения, т.е.
largeImg.src = href;

function showThumbnail(href, title) {
  largeImg.src = href;
  largeImg.alt = title;
  var is = getImageSize( 'largeImg');
  if (is.width > is.height) {
  largeImg.width = '500';
  largeImg.removeAttribute('height');
  }
	else {
	largeImg.height = '500';
	largeImg.removeAttribute('width');
	}
}

И все красиво.

dmitriymar 30.12.2012 17:59

Цитата:

Сообщение от Vdomah
поставить после загрузки изображения, т.е.
largeImg.src = href;

это не загрузка изображения -это указание адреса изображения.
и "работает" это только потому что изображения закешировались.
а при полной загрузке изображения возникает событие onload

Vdomah 30.12.2012 18:36

По-моему, для этого галерее изначально была эта функция:
/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
  var url = imgs[i].parentNode.href;
  var img = document.createElement('img');
  img.src = url;
}

Удалил кэш - все по прежнему работает.

Я бы остановился, но просто интересно как надо бы с onload правильно сделать?

dmitriymar 30.12.2012 18:47

img.src = url;
img.onload=function(){alert('загрузилось')}
alert('меняем размеры')

Цитата:

Сообщение от Vdomah
Я бы остановился, но просто интересно как надо бы с onload правильно сделать?

а вообще для подобного есть гугл. а скрипт -на свалку-без вариантов

Vdomah 30.12.2012 19:42

как onload работает я знаю. интересовала конкретная реализация.
последний совет конечно ок. только заработало - на свалку. а предложения по делу...

devote 30.12.2012 20:31

Цитата:

Сообщение от Vdomah
Нашел аналог getimagesize для js: http://www.rsdn.ru/forum/web/987244.1

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

Вот так нужно примерно:
function getImageSize(src, callback) {
    var img = new Image();
    img.onload = img.onerror = function() {
        callback(img.width, img.height);
    }
    img.src = src;
}

getImageSize('http://javascript.ru/forum/image.php?u=25460&dateline=1356854759', function(w, h){
    alert([w, h]);
});


Часовой пояс GMT +3, время: 18:47.