Манипулирование изображения на стороне клиента (обрезка)

Question

Я создаю веб-приложение, используя Анализ как мой бэкэнд.

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

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

Большинство решений включает использование jCrop для достижения результата, аналогичного примеру here (хотя без PHP).

Учитывая, что я использую Parse, есть ли клиентское решение, которое работает лучше? Как может выглядеть решение?

Спасибо!

Джесси

Answer 1

В принципе я бы так:

1. загрузки изображения в <canvas>
2. кадрировать изображение: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
3. сохранить изображение с холста: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Here - это очень g ood.

Отказ от ответственности: Я еще не проверял это, но я слышал, что этот способ работает.

Также используйте background-size:cover; или background-size:contain;, чтобы обойти неприятные проблемы с размерами.