javascript - jquery Jcrop如何做一个轮选？有可能吗？

Question

我正在创建一个应用程序，让用户可以拍照，然后他们必须从该照片中做出选择才能使用。此选择必须是具有特定尺寸的圆。

我想知道我应该怎么做。我有一个工作的 jCrop 选择框，可以将新的方形图像绘制到 Canvas 上。现在我想用那个图像做一个圆圈。

我认为使用纯 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%;
}