将所选图像裁剪为圆形，然后将其发送到服务器答案

【问题标题】：Crop selected image in circular shape, Before sending it to the server将所选图像裁剪为圆形，然后将其发送到服务器
【发布时间】：2018-09-01 10:34:59
【问题描述】：

我搜索过，但我发现的大部分内容要么已失效/旧浏览器不支持/将图像裁剪为矩形。

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

但我需要圆形而不是矩形。

所以，如果我有浏览/上传图片的输入：

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

用户选择图像后，无论是在同一个地方还是在弹出窗口中，用户都可以拖动突出显示的圆形，然后点击Crop。

所以最重要的部分是：

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

【问题讨论】：

【解决方案1】：

如果您只是想裁剪图像，您可能想要使用裁剪和遮罩。这样做是将图像裁剪成某种形状。这是您可以使用的代码示例：

.crop {
 clip-path: circle(60px at center);
}

&lt;img src="src.png"&gt;

从这里你可以做你需要做的使剪贴蒙版可拖动。希望这会有所帮助！

【讨论】：

谢谢，但是如果图像中有很多物体/人怎么办？我希望用户能够选择要裁剪为圆形的区域
您可以使用interactjs.io（这是一个相当不错的库）来使您的图像变大或变小，并且可以拖动。剪切路径将保持相同大小，60 像素，但随着用户将图像大小调整为更大，被剪切的区域变得更加放大。