Как сделать загрузку изображения, обрезку и размещение на фон?

Question

[Сергей Ермилов]

Здравствуйте!

Нужно сделать удобный инструмент загрузки картнки (input) с дальнейшей обрезкой (crop), чтобы в конце картинка помещалась на фон блока div. Нашел несколько библиотек. По отзывам неплохая - Croppie. Не хватает знаний как сделать это правильно и без костылей.

Заранее огромное спасибо всем откликнувшимся, очень признателен.

Comments

[Антон Литвиненко]

я могу конечно ошибаться но это вроде на беке должно происходить

[Сергей Ермилов]

Антон Литвиненко, нет, можно сделать и просто на JS. Примеров много - https://codepen.io/hajududat/pen/OJVEQdG. У меня вопрос был про то - как сделать правильно и разместить картинку после обрезки на фон.

[Антон Литвиненко]

Сергей Ермилов, а как картинка будет сохраняться после перезагрузки браузера?

[Сергей Ермилов]

Антон Литвиненко, это за рамками моей задачи пока. В JS сохраняется URL в Base64, а дальше уже бекендер наверное должен решать как с этим работать. У меня сейчас задача показать клиенту как это выглядит. Но пока можно наверное положить в LocalStorage, а там уже думать дальше.

Answer 1

[ThunderCat]

Нужно сделать удобный инструмент загрузки картнки (input)

Собственно инпут чем не устраивает?

с дальнейшей обрезкой (crop)

Любой плагин, которых миллион

чтобы в конце картинка помещалась на фон блока div.

Я так понимаю на сервер ее загружать не нужно? Тогда зачем вообще кроп, бэкграунд можно и так настроить достаточно гибко, как по позиции, так и по размерам.