Масштабирование фотографий.

[Karlasan]

вот как я реализовал поставленную задачу, если я её верно понял

<div style='zIndex:2;' contentEditable=true>
<img src='./karlson.jpg' id='userphoto'>
</div>
<div contentEditable=true><img id='ramka' src='./1.gif' style='position:absolute;top:10px;left:10px;border:solid 2px blue;zIndex:3;' ondragstart="Move(this);return false;"></div>
<button onclick='ShowPostData();'>Показать данные</button>

<script type="text/javascript">
function Move(ClickedItem)
{
	SelectedItem = ClickedItem;
	SelectedX = SelectedItem.style.pixelLeft;
	SelectedY = SelectedItem.style.pixelTop;
	MouseX = event.clientX;
	MouseY = event.clientY;
	document.onmousemove = Drag;
	document.onmouseup = Drop;
}
function Drag()
{
	SelectedItem.style.left = SelectedX + (event.clientX - MouseX);
	SelectedItem.style.top = SelectedY + (event.clientY - MouseY);
}
function Drop()
{
	document.onmousemove = null;
	document.onmouseup = null;
}
function ShowPostData()
{
	pictureleft=document.all.userphoto.offsetLeft;
	picturetop=document.all.userphoto.offsetTop;

	picturewidth=document.all.userphoto.offsetWidth;
	pictureheight=document.all.userphoto.offsetHeight;

	ramkaleft=document.all.ramka.offsetLeft;
	ramkatop=document.all.ramka.offsetTop;

	ramkawidth=document.all.ramka.offsetWidth-4;
	ramkaheight=document.all.ramka.offsetHeight-4;
	//4 - ширина бордера рамки, равна 2*толщина_бордера
	
	res='Координаты левого верхнего угла рамки: '+(ramkaleft-pictureleft)+','+(ramkatop-picturetop)+'\r\n';
	res+='Ширина рамки: '+ramkawidth+', высота рамки: '+ramkaheight+'\r\n';
	res+='Ширина фотки: '+picturewidth+', высота фотки: '+pictureheight;

	alert(res);
}
</script>

вот как сие работает: Для просмотра ссылки Войди или Зарегистрируйся
УВЫ! Но в опере не пашет, только в IE (на файрфоксе не тестил). На досуге попробую разобраться в чем дело.
вот как это работает:
юзер загружает картинку. если размер слишком большой - ресайзим средствами пхп (мануалов по этому вопросу в сети куча) и сохраняем в папку, после чего отдаем на съедение моему творению.
karlson.jpg - играет роль загруженной пользователем картинки
1.gif - прозрачная картинка, играющая роль рамки.
пользователь может передвигать рамку и изменять её размер, может изменять размер у фоты.
кнопка "Показать данные" показывает результаты работы скрипта: положение/размеры рамки, размеры фоты. на основе этих данных вырезаем соответствующий кусок из пользовательской фоты - мануалы как это сделать средствами пхп опять таки можно найти в сети.

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

 

[gruppastimul]

лучше конечно готовое решение + с поддержкой всех браузеров.

 

[KillDead]

То есть, тебе просто нужно вырезать обозначенную юзером облать?

 

[gruppastimul]

Тоесть в первом посте всё подробно с картинками ))

 

[Karlasan]

ИМХО здесь пхп-кодингом и не пахнет. Получить координаты выделенной области можно или посредством flash, или (как в моем сыром примере) посредством яваскрипт/дхтмл.
если известны координаты вырезаемой области, то вырезать средствами пхп из картинки соответствующий фрагмент - задача достаточно тривиальная

 

[KillDead]

ИМХО здесь пхп-кодингом

Не а. Пахнет. Как ты с помощью флэш что-нибудь запишешь? Он писать ничего не умеет.
Нашёл я класс, который работает с картинками - bitmapdata. Щас немного почитал AS3 - до этого работал только во 2-м- отличия довольно большие. Попробую написать.
Как я понял рамка не меняет свой размер. Только фотка.
А

текст текст текст

на рамке, это што такое?

 

[Karlasan]

Не а. Пахнет. Как ты с помощью флэш что-нибудь запишешь? Он писать ничего не умеет.

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

а

если известны координаты вырезаемой области, то вырезать средствами пхп из картинки соответствующий фрагмент - задача достаточно тривиальная

 

[gruppastimul]

Как я понял рамка не меняет свой размер. Только фотка.
А на рамке, это што такое?

ага правильно понял.
текст текс ттекст - это будет написан текст - но это уже в задачу н евходит - как сдлеать туда текст это я уже знаю ))

 

[KillDead]

Уффф.
Делал в перерывах между написанием граббера и скинов к дле. Так что возможны баги.
Как я себе представляю работу скрипта:
1) Чел загружает фотку. (Надеюсь загрузчегъ ты напишешь сам). И апоадинг отправляет на страницу со флэшкой, которой передаётся имя сохранённой фотки через гет или пост.
2) Чел маштабирует фотку, настраивает поле и отсылает данные.
3) Всё, картинка готова.
Я сделал тестовый вариант, показал со 2-го шага, передал данные гетом. Посмотри. Если что-то не нравится- попробую исправить.
Для просмотра ссылки Войди или Зарегистрируйся

текст текс ттекст - это будет написан текст - но это уже в задачу н евходит - как сдлеать туда текст это я уже знаю ))

Просто, если юзер будет вводить этот текст, то его проще запихнуть во флэшку.

 

[gruppastimul]

KillDead твой вариант самый правильный.
пусть в моих примерах маштабирование чуток по другому происходит, но такой вариант тоже оч хорош!