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

我正在开发一个宠物搜索应用程序，我需要将宠物的头像裁剪成一个小圆圈，然后将其与一个轮廓“合并”//组合，然后作为标记传递给静态谷歌地图。我想在前端实现这一点，因为在后端实现这一点需要（如果服务扩展或增长过多）更多的图像空间管理

以下是大纲：

结果应该如下所示：

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

我想知道我是否可以完全在前端完成这项工作。据我所知，我可以：

• 将配置文件图像插入画布
• 然后将其裁剪成圆形（不知道如何操作）
• 将其转换回图像（不确定是否需要）
• 将其添加到另一个画布，以便我可以将其与大纲结合
• 将其保存为图像，然后将其作为标记发送到静态谷歌地图

我想，如果我把画布边框做成圆形（使用css边框半径），它可以工作，但是没有

那么，就问题本身而言，一个图像是否可以仅用JavaScript和画布（在前端）裁剪成一个圆圈，还是应该在后端制作？如果可以，怎么做

---

提前谢谢。

你能用css设计标记样式吗？这有帮助吗？您可以使用CSS对其进行编辑，然后使用javascript为其提供背景url@BeatAlex我不能用css来设计它，因为静态google地图只接受图像作为自定义标记，我不明白为什么它不能在静态地图上工作。