Как сделать круговую обрезку аватара?

Question

[Dantes589]

Добрый день, подскажите пожалуйста как сделать реальную обрезку фото с получением координатов, ширины и высоты как в этой Demo? То есть нужно просто выделять область картинки и иметь возможность уменьшать и расширять
https://kirill3333.github.io/react-avatar/
Можно на нативном JS или React, без библиотек.

Comments

[zorca]

Там же ссылка на исходники приведена

[Dantes589]

zorca, да там юзают различные библиотеки, хотелось бы проще

[zorca]

Dantes589, да вроде одну только: konva

Answer 1

[xmoonlight]

На реакте и без библиотек...
Вспомнился диалог из "Алисы..." (х/ф):

- Нам надо разделиться...
- Так, давай разделимся...
- НО! ВМЕСТЕ!

В интернете решений с уроками - просто навалом. Видимо, реакт все ресурсы забрал))

Comments

[Dantes589]

Максимум что я находил это на jQuery и библиотеки разные

[xmoonlight]

Dantes589, canvas crop image pure js

Answer 2

[whoame]

Введя в Гугл crop image js/react выводятся 100500 библиотек, смотришь что подходит и юзаешь

Видимо автора запутал тот факт что нужно круглым сделать. На деле картинка квадратная обрезается и на фронте через бордер радиус закругляется