如何裁剪圆形图像然后将其设置在另一个图像中？

Question

我正在寻找一个寻找宠物的应用程序，我需要将宠物的化身变成一个小圆圈，然后将其合并为一个轮廓然后通过作为静态谷歌地图的标记。我想在前端进行此操作，因为在后端执行此操作需要（如果服务扩展或增长太多）对图像进行更多空间管理。

这是大纲：

结果应如下所示：

轮廓图片的尺寸可能比轮廓大，因此它们可以是任何形状（通常是正方形或矩形）。

我试图弄清楚我是否可以在前端完全做到这一点。据我所知，我可以：

• 拍摄个人资料图片并将其插入画布
• 然后将其裁剪成圆形（不知道该怎么做）
• 将其转换回图像（不确定是否需要）
• 将其添加到另一个画布，以便我可以将其与轮廓
组合
• 将其另存为图像，然后将其作为标记发送到静态Google地图

我想如果我将画布边框变成圆形（使用css border-radius）它可以工作，但它没有。

因此，对于问题本身，可以使用JavaScript和Canvas（在前端）将图像裁剪成圆形，还是应该在后端进行此操作？如果可以，怎么样？

提前致谢。