Как стать автором
Обновить

Комментарии 24

Никто не спорит, что canvas — очень хорошая версия. Но она куда сложнее и поэтому подойдет не каждому.

Чем сложнее? Вы всё равно используете внешние функции для манипуляции с изображениями (пусть и в стандартной поставке PHP). С таким же успехом можно подключить готовую JS-библиотеку для обработки картинок и добавить UI. Впрочем, работа с изображениями напрямую довольно проста — достаточно знать немного линейной алгебры и пару алгоритмов.


В вашем варианте пока только минусы: нужно иметь установленный и настроенный PHP, фильтрации входящих данных нет, так что можно заспамить сервер гигабайтными картинками, поворот происходит с явной задержкой, плюс, всё привязано к именам файлов и ФС, хотя, по-хорошему, надо пересылать сами картинки в виде байтов.

Если Вы заметили, то я описывал функции с уже имеющимся изображением. У меня на сайте сначала происходит добавление изображения, которое пользователь может загружать хоть терабайтовым, которое урезается до нужных мне размеров, а после попадает под эти самые функции. И если, как я упомянул, мы имеем дело с добавлением аватара для пользователя, значит речь идет о базе данных, где хранятся эти самые пользователи. А зачастую с базой работают посредством php скриптом. Повторюсь «зачастую». Никто не говорит что этот метод единственный. А библиотеками я не привык пользоваться, поскольку в них имеется масса ненужного.
А библиотеками я не привык пользоваться, поскольку в них имеется масса ненужного.

Ага, и поэтому тащите jquery ради одной её функции ajax.

Я пользуюсь только jquery. Помимо ajax (который немаловажный) я для других целей использую еще несколько методов. Именно потому что я использую jquery не пытаюсь перегружать еще каким-то библиотеками. Это сугубо мое мнение и не является конечным для читателей.
Именно потому что я использую jquery не пытаюсь перегружать еще каким-то библиотеками.

Экономите на трафике? Но вы же каждый раз пересылаете изображение туда-сюда. Я вот потыкал кнопку поворота 800 раз, и трафик с вашим сервером составил 160 Мб. С канвасом и обработкой в браузере он был бы около нуля.


Если же боитесь тормозов, то стоит сперва заменить jquery на более быстрые аналоги.

А завтра у вас на сайте редизайн и аватарка станет не 100x100, а 200x200.

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

А Вы что будете делать? Просить людей перезалить картинки? Отресайзите старые и будете счастливы от размытости и многократного сжатия в jpeg?

Мой посыл не в том, чтобы хранить только обработанные картинки, а в том, чтобы обработку эту делать в браузере средствами HTML5 (которые автор не использует), а на сервер посылать уже обработанную картинку и, возможно, доп. инфу про эту обработку. Оригинал можно хранить на своё усмотрение.


Смотрите, пользователь хочет обработать свою аватарку. Он случайно жмёт на кнопку поворота. В авторском варианте это сразу перезапишет аватарку. А так как всё в jpg, то часть информации потеряется. Пользователь попытается вернуть исходное положение, что в итоге приведёт к ещё одной перезаписи файла и ухудшению качества.


В моём варианте, пока пользователь не нажмёт кнопочку "отправить", изображение будет меняться только в браузере. Тут пользователь может поворачивать картинку сколько угодно, качество результата это не изменит. Если же изменения надо отменить, можно просто не отправлять их.


В итоге, в моём варианте 1000 поворотов картинки вызовет 0 операций с файловой системой на сервере, трафик с сервером составит 0 байт. В авторском варианте 1000 поворотов вызовет около 1000 операций записи и 1000 операции чтения на сервере, обменяется с сервером большим количеством трафика (1000 * размер картинки) и окончательно убьёт качество результата без возможности отмены этого.

Что Вы будете делать после того как произойдёт редизайн сайта и встанет потребность увеличить аватарки с 100x100 до 200x200?

У него на сервере будет исходник и последовательность действий- он перегенерирует аватарку.

У Вас на сервере будет конечные 100x100. Ваши действия?
У Вас на сервере будет конечные 100x100. Ваши действия?

С чего вы так решили? У меня на сервере хранятся и оригиналы и обработанные картинки. Действия при редизайне аналогичные.


Если вы не поняли, повторюсь: разница лишь в том, что при манипуляциях с картинкой у меня файл с обработанной картинкой отправляется 1 раз (по окончании редактирования оригинала, который точно также хранится на сервере), а у автора аватарка перезаписывается при каждом действии пользователя.

Разницы в том, что у Вас на сервер уходит КОНЕЧНЫЙ РЕЗУЛЬТАТ, а у него вся последовательность действий.

И если эту последовательность действий записать, то потом её можно воспроизвести с одной единственной записью в конце.

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


Но на самом деле надо делать по-другому: отправлять аватар в непожатом виде, а уже на сервере генерить из него разные thumbnails.

Так браузер же не даст просто так вынуть из canvas загруженную пользователем картинку по политикам безопасности.
Все равно сервер нужен.

Сервер в любом случае нужен, чтобы посылать туда результат. А про ограничения из-за политик не знаю, можно пример? Я помню, что делал кроп изображений в браузере через canvas, и никаких проблем не было.

Можно погуглить по ошибке
Uncaught SecurityError: Failed to execute 'getImageData'
Просто ее грузить в канвас нужно через FileAPI/FileReader и readAsDataURL

А, ну я так и делал, поэтому всё было нормально.

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

PS. Очень не хочу показаться брюзгой, но, пожалуйста, отформатируйте код.
У меня все изображения пользователей хранятся на сервере и поэтому не использовать сервер не получится. Это не редактор картинок, а загрузка изображений на сервер для последующего использования не только для одного пользователя
Только вот загрузка полноразмерной фотографии в 16мп и загрузка аватара 100х100- это две большие разности.
Перед попаданием фотографии в окно изменения аватара у меня она проходит обработку и урезается до приемлемых размеров и после обработки ширина и высота ее составляет 200пикселей.
Это уже в обратку. Для получения этого 200 пиксельного изображения вы заставляете пользователей грузить десяток мегабайт фотографии с его 100500 мегапиксельной камеры.
И отсылка на сервер для поворота- перебор, можно повернуть в браузере при помощи CSS, а при финальной отправке просто учесть угол поворота. А то у вас после 4 поворотов получится не оригинальное изображение, а каша артефактов сжатия JPEG.
А то у вас после 4 поворотов получится не оригинальное изображение, а каша артефактов сжатия JPEG.

Ага. Вот что случается, если повернуть картинку много-много раз.


Осторожно, шакалы

image


При этом не стоит забывать, что при каждом повороте идёт обращение к диску и операция записи, что ещё больше тормозит процесс.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.