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%;
}