如何使用 CSS 中的剪辑路径裁剪和保存 div 下的图像？

基本上，我现在正在从事一个自由职业项目，其中图像被上传到网站上并被剪切到已经定义的路径上。我给你举个例子：

如您所见，我将 img 标签放在 div 标签下方

<div style="clip-path: xxx">
    <img src="xxxxx.xxx">
</div>

现在，我使用 JQuery UI Draggable 小部件来移动图像。搞定了，没问题。

问题是，我如何捕获并保存该图像？我尝试使用 Html2Canvas 对其进行“截屏”，但结果始终是正方形而不是心形图像。