Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > изменить размер изображения

Автор: armor85 27.2.2008, 16:28

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

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

Автор: ksnk 27.2.2008, 16:53

чтобы сохранить пропорции - нужно сохранить пропорции... ;-)
У объекта 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')">

Автор: armor85 27.2.2008, 17:40

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

Автор: ksnk 27.2.2008, 18:07

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

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

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

Автор: armor85 27.2.2008, 18:21

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

Автор: ksnk 27.2.2008, 19:20

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

)

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

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