javascript - 以圆形裁剪所选图像，然后将其发送到服务器

Question

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

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

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

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

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

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

所以最重要的部分是:

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

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

Answer 1

如果您只是想裁剪图像，您可能需要使用裁剪和 mask 。它的作用是将图像裁剪成某种形状。这是您可以使用的代码示例:

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

<img src="src.png">

从这里您可以执行所需的操作，使剪贴蒙版可拖动。希望这有帮助!