设计带有拖拽和可调整大小功能的T恤的CSS蒙版技巧

Question

我试图建立反应组件，以设计一个动态的产品，其中用户可以选择的产品，如T恤，马克杯，夹克等，并选择图像打印在该产品的基础上。首先，我试图在产品基础上实现图像蒙版。我已经使用了react、dragabble和resizeable组件来选择图像。以下是代码：https://stackblitz.com/edit/react-draggable-and-resizable-pictures-3uufjl?file=index.js当用户拖动或调整图像大小时，如果选定的图像超出T恤的边界，我将尝试隐藏该图像。我已经研究了css蒙版，其中背景图像和蒙版图像被应用到相同的元素中，但我有背景图像(即t恤)和蒙版图像(即蒙娜丽莎图像)，它们位于不同的html元素中。我有点困惑，我怎么才能用choose图片实现T恤的css蒙版图像。