VPF::изменить размер изображения - Форум программистов

armor85

Дата 27.2.2008, 16:28 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Здравствуйте,

как изменить размер изображения сохраняя пропорции,
причем пропорции должны быть как по ширине так и по высоте,
т.е. рисунок ограничен размерами 150x200. Если ширина больше значит
подводим её и изменяем высоту пропорционально и на оборот.

ksnk

Дата 27.2.2008, 16:53 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

чтобы сохранить пропорции - нужно сохранить пропорции... ;-)
У объекта Image есть параметры width и height

Код


function resize(id){
function change_size(elt,img,maxx,maxy){
   var d=Math.min(img.height/maxy,img.width/maxx); 
   elt.style.width=Math.floor(img.width/d)+'px';
   elt.style.height=Math.floor(img.height/d)+'px';
}

var e = document.getElementById(id)
   , img=new Image()
   ,on_complete=function(){
      change_size(e,img,200,150);
   };
img.src=e.src;
if (img.complete) on_complete();
img.oncomplete=on_complete;
}

<body onload="resize('image')">

Это сообщение отредактировал(а) ksnk - 27.2.2008, 18:09

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

armor85

Дата 27.2.2008, 17:40 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

ksnk, смотрю в код вижу фигу...
Можешь пояснить пожалуйста, что такое elt, img и oncomplete.

ksnk

Дата 27.2.2008, 18:07 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Предполагается, что на страничке находится <img id='image' src='...' > в который вставляется та самая картинка, которую надо хитрым образом ужать...

Так как в сам тег может содержать хитроумные стили - узнать у него размер картинки не получится, нужно создавать new Image() и выяснять габариты картинки у него. Для проверки загрузилась картинка или нет - используется еще кое-какая магия. Собственно изменение размеров - в функции change_size...

Добавлено через 3 минуты и 26 секунд
Видимо, лучше запихать все в одну функцию, чтобы было меньше соблазна распихать все это хозяйство по тексту...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

armor85

Дата 27.2.2008, 18:21 (ссылка)

(нет голосов)

Загрузка ...

Злой программер

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 6.2.2007
Где: Сочи, блин!

Репутация: нет
Всего: -1

Чё та не работает,
проблема в том, что картинки подгружаются в момент нажатия на таблицу,
функция видимо срабатывает раньше, чем картинка загружается.
Хотя для этого и предусмотрен on_complete, но почему то не срабатывает.

ksnk

Дата 27.2.2008, 19:20 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(armor85 @ 27.2.2008, 18:21

)

проблема в том, что картинки подгружаются в момент нажатия на таблицу,

Каким образом вот это делается?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »