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

Тема в разделе "JavaScript", создана пользователем danneo, 13 апр 2014.

Модераторы: ZiX
  1. danneo

    danneo Честный

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

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
  3. danneo

    danneo Честный

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

    alffcpu Создатель

    Регистр.:
    23 окт 2013
    Сообщения:
    22
    Симпатии:
    56
    Здравствуйте,
    Когда вот у меня была похожая задача. Нужно было из изображения дать возможность пользователю вырезать квадратный аватар. Я воспользовался http://www.cropzoom.com.ar/demo/

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

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

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

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

    Вложения:

    • my_cropzoom.zip
      Размер файла:
      384,6 КБ
      Просмотров:
      3
    Последнее редактирование: 13 апр 2014
    danneo нравится это.
  5. dwarf

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
    Если без использования canvas, то только так, да.