Как сделать загрузку и кадрирования картинки?

[danneo]

Нужно сделать загрузку фотографии с предварительным кадрированием под нужный размер, как в том же vk.
Нашел плагин Jcrop. Но он вроде как работает в html5 (пока не разобрался).
Нужно чтобы работало это дело на IE 7 хотя бы. И очень желательно чтобы на смартфонах и т.п.
Т.к. jquery, js знаю не на уровне профи, английский тоже плохо знаю, проблем куча.
Подскажите, пожалуйста, решения, желательно с инструкциями
в инете чего нашел - не помогло.

 

[dwarf]

Для просмотра ссылки Войди или Зарегистрируйся

Cross-platform Compatibility

• Firefox 2+
• Safari 3+
• Opera 9.5+
• Google Chrome 0.2+
• Internet Explorer 6+

 

[danneo]

не совсем понятен процесс работы.
Я планирую так: пользователь выбирает картинку, она загружается с помощью ajax на сервер. С сервера приходит картинка (название). js открывает диалоговое окно (слой поверх страницы), в нем картинка и весь функционал для выделения границ. Пользователь выделяет рамку и нажимает "применить". js должен взять данные выделений и отправить их (x,y,w,h) с помощью ajax на сервер. На сервере же взять снова этот файл, сделать с ним все операции по преобразованию, удаляет 1-ю картинку. После чего вернуть в браузер. Js в браузере после этого закрывает диалоговое окно и выводит обрезанную картинку.
Правильно или чего-то упустил? Может быть есть другие алгоритмы?

 

[alffcpu]

Здравствуйте,
Когда вот у меня была похожая задача. Нужно было из изображения дать возможность пользователю вырезать квадратный аватар. Я воспользовался Для просмотра ссылки Войди или Зарегистрируйся

Я конечно всем функционалом не воспользовался, отключил повороты и увеличение и уменьешние (т.к. если их использовать, то пришлось бы дополнительные вычисления делать в php, я признаться поленился. подумал итак вырежут. + у меня минимальный размер установлен 200 на 200. Аватарка должна была быть квадратная и пропорции не меняться.)

Автор пишет что работает от ie 9+, но я проверял в i 8 (может и 7) работало более или менее.
Если заинтересует, то я вот приложил пример того как я сделал, но там конечно все упрощено сильно. У меня при клике на кнопку открывался pop up (окошко fancybox с iframe) и туда грузилось примерно то что я приложил. Человек выбирал область которая нужна и жал Готово. После чего данные о выбранной области отправлялись на сервер и там уже из картинки вырезался кусок и сохранялся как аватар. Я не стал код по вырезке изображения на php прилагать, т.к. у меня там на CodeIgniter было сделано и думаю врят ли это помогло. Но в файле на который отправляются данные я расписал что примерно там приходит.
В примере моем файлы надо на сервер грузить. Т.к. все же php там.

P.s. не претендую на правильность и красоту решения, и извиняюсь за лишние скрипты которые там грузятся (я про qtip). Я взял что было и упростил слегка. Может пригодится. У меня почти тоже вот работало неплохо.

Все же перечитал ваши требования и наверное мой пример вам не очень подходит. И смартфон и ie7. Мне кажется, что такое надо самому сильно дорабатывать. Я вот когда искал все решения были очень общие и надо самому многое делать.

 

[dwarf]

Правильно или чего-то упустил? Может быть есть другие алгоритмы?

Если без использования canvas, то только так, да.