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

danneo

Честный
Регистрация
13 Ноя 2007
Сообщения
1.526
Реакции
121
Нужно сделать загрузку фотографии с предварительным кадрированием под нужный размер, как в том же vk.
Нашел плагин Jcrop. Но он вроде как работает в html5 (пока не разобрался).
Нужно чтобы работало это дело на IE 7 хотя бы. И очень желательно чтобы на смартфонах и т.п.
Т.к. jquery, js знаю не на уровне профи, английский тоже плохо знаю, проблем куча.
Подскажите, пожалуйста, решения, желательно с инструкциями :)
в инете чего нашел - не помогло.
 
не совсем понятен процесс работы.
Я планирую так: пользователь выбирает картинку, она загружается с помощью ajax на сервер. С сервера приходит картинка (название). js открывает диалоговое окно (слой поверх страницы), в нем картинка и весь функционал для выделения границ. Пользователь выделяет рамку и нажимает "применить". js должен взять данные выделений и отправить их (x,y,w,h) с помощью ajax на сервер. На сервере же взять снова этот файл, сделать с ним все операции по преобразованию, удаляет 1-ю картинку. После чего вернуть в браузер. Js в браузере после этого закрывает диалоговое окно и выводит обрезанную картинку.
Правильно или чего-то упустил? Может быть есть другие алгоритмы?
 
Здравствуйте,
Когда вот у меня была похожая задача. Нужно было из изображения дать возможность пользователю вырезать квадратный аватар. Я воспользовался Для просмотра ссылки Войди или Зарегистрируйся

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

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

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

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

Вложения

  • my_cropzoom.zip
    384,6 KB · Просмотры: 5
Последнее редактирование:
Назад
Сверху