Очень немногие браузеры поддерживают выбор изображения с помощью Javascript и манипулирование им без предварительной загрузки его на сервер. Вместо этого вам необходимо:
- Разрешить пользователю загружать изображения на сервер
- Когда загрузка будет завершена, измените размер изображения (с помощью PHP) до управляемого размера для браузера для предварительного просмотра
- Показать измененное изображение предварительного просмотра в браузере, например, JCrop
- После того, как пользователь выберет область обрезки, попросите его нажать «Сохранить»
- При сохранении передайте координаты обрезанной области серверу / PHP, чтобы обрезать исходное изображение. Вам придется масштабировать координаты предварительного просмотра до координат исходного изображения.
- Сохранение нового образа на диск / S3 / что угодно с помощью PHP
Мне удалось сделать это, даже не используя свой сервер и не заставляя изображение коснуться моего сервера с помощью http://transloadit.com/.. Я использую форму выгрузки Javascript от Transloadit для загрузки на свое серверное хранилище (S3) и использую шаблон, который сохраняет оригинал и размеры для предварительного просмотра. И оригинал, и предварительный просмотр хранятся во временной учетной записи S3, а не в моей. Затем я использую JCrop, чтобы показать пользователю предварительный просмотр. После того, как они выбирают область обрезки, я затем говорю transloadit обрезать исходную фотографию, но с моими координатами обрезки (масштабированными от изображения предварительного просмотра, чтобы соответствовать оригиналу), используя шаблон, который также делает несколько размеров миниатюр. Затем Transloadit сохраняет все изображения в моей учетной записи S3 и сообщает мне URL, где он их сохранил.