jquery Jcrop Как сделать круглый выбор? Возможно ли это?

Question

Я создаю приложение, которое позволяет пользователям делать снимок, и с этой фотографии они должны сделать выбор для работы. Этот выбор должен быть кругом с определенными размерами.

Мне интересно, как я должен это делать. У меня есть рабочий набор jCrop, который рисует новое квадратное изображение на холст. Теперь я хочу создать круг этого образа.

Я предполагаю, что это очень сложно с чистым javascript или jQuery. Поэтому я искал способ адаптировать поле выбора Jcrop как круг, но я не могу найти способ сделать это легко.

Целью является создание реального изображения для сохранения на устройстве для дальнейшего использования.

Я хочу спросить вас, как я должен это делать. Как создать круглое изображение из выделения? Могу ли я использовать Jcrop для этого или есть лучшие решения?

В конце концов результат должен быть круглым изображение так же, как профильные Google Plus фотографии:

Answer 1

Это может быть сделан с помощью CSS.

Для инструмента культур используют

.jcrop-holder div { 
    -webkit-border-radius: 50% !important; 
    -moz-border-radius: 50% !important; 
    border-radius: 50% !important; 
    margin: -1px; 
} 

и отображать изображение профиля как круг

.profile-image { 
    border-radius: 50%; 
}