Комментарии 24
Зачем сервер, если есть canvas и всё можно делать в браузере?
http://camanjs.com/examples/
https://mattketmo.github.io/darkroomjs/
Чем сложнее? Вы всё равно используете внешние функции для манипуляции с изображениями (пусть и в стандартной поставке PHP). С таким же успехом можно подключить готовую JS-библиотеку для обработки картинок и добавить UI. Впрочем, работа с изображениями напрямую довольно проста — достаточно знать немного линейной алгебры и пару алгоритмов.
В вашем варианте пока только минусы: нужно иметь установленный и настроенный PHP, фильтрации входящих данных нет, так что можно заспамить сервер гигабайтными картинками, поворот происходит с явной задержкой, плюс, всё привязано к именам файлов и ФС, хотя, по-хорошему, надо пересылать сами картинки в виде байтов.
А библиотеками я не привык пользоваться, поскольку в них имеется масса ненужного.
Ага, и поэтому тащите jquery ради одной её функции ajax.
Именно потому что я использую jquery не пытаюсь перегружать еще каким-то библиотеками.
Экономите на трафике? Но вы же каждый раз пересылаете изображение туда-сюда. Я вот потыкал кнопку поворота 800 раз, и трафик с вашим сервером составил 160 Мб. С канвасом и обработкой в браузере он был бы около нуля.
Если же боитесь тормозов, то стоит сперва заменить jquery на более быстрые аналоги.
В этом случае, автор постинга просто перегенерирует аватарку из хранящегося исходного файла и координат для кропанья.
А Вы что будете делать? Просить людей перезалить картинки? Отресайзите старые и будете счастливы от размытости и многократного сжатия в jpeg?
Мой посыл не в том, чтобы хранить только обработанные картинки, а в том, чтобы обработку эту делать в браузере средствами HTML5 (которые автор не использует), а на сервер посылать уже обработанную картинку и, возможно, доп. инфу про эту обработку. Оригинал можно хранить на своё усмотрение.
Смотрите, пользователь хочет обработать свою аватарку. Он случайно жмёт на кнопку поворота. В авторском варианте это сразу перезапишет аватарку. А так как всё в jpg, то часть информации потеряется. Пользователь попытается вернуть исходное положение, что в итоге приведёт к ещё одной перезаписи файла и ухудшению качества.
В моём варианте, пока пользователь не нажмёт кнопочку "отправить", изображение будет меняться только в браузере. Тут пользователь может поворачивать картинку сколько угодно, качество результата это не изменит. Если же изменения надо отменить, можно просто не отправлять их.
В итоге, в моём варианте 1000 поворотов картинки вызовет 0 операций с файловой системой на сервере, трафик с сервером составит 0 байт. В авторском варианте 1000 поворотов вызовет около 1000 операций записи и 1000 операции чтения на сервере, обменяется с сервером большим количеством трафика (1000 * размер картинки) и окончательно убьёт качество результата без возможности отмены этого.
У него на сервере будет исходник и последовательность действий- он перегенерирует аватарку.
У Вас на сервере будет конечные 100x100. Ваши действия?
У Вас на сервере будет конечные 100x100. Ваши действия?
С чего вы так решили? У меня на сервере хранятся и оригиналы и обработанные картинки. Действия при редизайне аналогичные.
Если вы не поняли, повторюсь: разница лишь в том, что при манипуляциях с картинкой у меня файл с обработанной картинкой отправляется 1 раз (по окончании редактирования оригинала, который точно также хранится на сервере), а у автора аватарка перезаписывается при каждом действии пользователя.
И если эту последовательность действий записать, то потом её можно воспроизвести с одной единственной записью в конце.
Все равно сервер нужен.
Сервер в любом случае нужен, чтобы посылать туда результат. А про ограничения из-за политик не знаю, можно пример? Я помню, что делал кроп изображений в браузере через canvas, и никаких проблем не было.
PS. Очень не хочу показаться брюзгой, но, пожалуйста, отформатируйте код.
А то у вас после 4 поворотов получится не оригинальное изображение, а каша артефактов сжатия JPEG.
Ага. Вот что случается, если повернуть картинку много-много раз.
При этом не стоит забывать, что при каждом повороте идёт обращение к диску и операция записи, что ещё больше тормозит процесс.
Добавление аватара, обрезка фото на мобильном устройстве и десктопе на JavaScript и PHP