Javascript 在将选定图像发送到服务器之前，将其裁剪为圆形

我搜索了一下，但我发现的大部分内容要么已经过时了，要么旧浏览器不支持，要么将图像裁剪成矩形

我想要一个类似Facebook的上传个人资料图片的功能，用户选择一个图像，如果该图像没有超过特定的尺寸，它将被显示，然后用户拖动高亮显示的矩形并裁剪图像

但我需要的不是矩形，而是圆形

因此，如果我有一个用于浏览/上传图像的输入：

<input type="file" class="sr-only" id="input" name="image" accept="image/*">

在用户选择图像后，无论是在同一位置还是在弹出窗口上，用户都可以拖动高亮显示的圆形，然后单击

Crop

因此，最重要的部分是：

• 图像被裁剪成圆形
• 支持大多数浏览器，包括手机/平板电脑/ipad浏览器
• 能够使用PHP将裁剪后的图像上载到服务器

---

我知道该平台是用来帮助解决错误和bug的，但正如我所说的，我首先搜索并想在这里询问，因为这里有许多开发人员，他们中的一些人可能也遇到过同样的情况，并找到了正确的解决方案。

如果你只是想裁剪图像，你可能需要使用剪辑和遮罩。它的作用是将图像裁剪成特定的形状。以下是您可以使用的代码示例：

.crop{
剪辑路径：圆形（中心60像素）；
}

---

谢谢，但是如果图像中有很多对象/人怎么办？我希望用户能够选择要裁剪为圆形的区域，您可以使用（这是一个非常好的库）使图像变大或变小，并可拖动。剪切路径将保持相同的大小，即60px，但随着用户将图像的大小调整为更大，剪切的区域将更放大。