jquery Jcrop如何进行轮选？甚至可能吗？

Posted 2023-02-25

【中文标题】jquery Jcrop如何进行轮选？甚至可能吗？

【英文标题】：jquery Jcrop how to do a round selection? Is it even possible?

【发布时间】：2014-02-21 21:27:22

【问题描述】：

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

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

我认为纯 javascript 或 jQuery 很难做到这一点。于是就想办法把Jcrop的选择框改成圆形，但是没找到轻松做到的方法。

目标是创建真实图像以保存在设备上以供进一步使用。

我想问你一个方向，我应该如何做到这一点。如何从选择中创建圆形图像？我可以为此使用 Jcrop 还是有更好的解决方案？

最终结果应该是圆形图像，就像 Google Plus 个人资料图片一样：

【参考方案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%;

【讨论】：

你是天才，你节省了我的时间，谢谢。

这不起作用。如果添加这个 css，它仍然是矩形选择。