如何用CSS mask实现React下可拖拽缩放T恤定制印花的遮罩效果

CSS mask不需要和背景图绑定在同一个元素，mask是作用于当前绑定的元素本身，只会展示当前元素中与mask图源不透明区域重叠的部分，完全可以直接作用于用户上传的图片元素。
你可以根据你的业务场景选择以下任意一种方案：

方案1：CSS mask（适配不规则产品形状，推荐用于多品类产品场景） #

你需要提前准备好对应产品可打印区域的mask素材：要求素材尺寸和产品展示尺寸1:1对应，可打印区域为纯不透明，非打印区域为完全透明的PNG格式图片。
核心实现步骤：

• 将T恤基底图、可拖拽缩放的用户上传图片放在同一个相对定位的父容器内
• 给用户上传的图片元素绑定mask属性，指定对应产品的mask素材地址即可
  核心代码示例：

/* 父容器：尺寸和产品展示尺寸完全一致 */
.product-preview-wrapper {
  position: relative;
  width: 400px;
  height: 500px;
}
/* 产品基底图 */
.product-base-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* 用户上传的可拖拽缩放图片 */
.user-custom-img {
  position: absolute;
  z-index: 2;
  /* mask配置 */
  mask-image: url('/tshirt-print-mask.png');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  /* webkit内核浏览器兼容 */
  -webkit-mask-image: url('/tshirt-print-mask.png');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

切换产品品类时，只需要动态替换mask-image的素材地址即可，不需要修改其他逻辑。

方案2：overflow裁剪 + 边界限制（适配规则矩形打印区域，成本最低） #

如果你的所有产品可打印区域都是规则矩形，可以不用mask，用更简单的实现方式：

• 在父容器内额外加一个和打印区域尺寸、位置完全一致的子容器，设置overflow: hidden
• 把用户可拖拽缩放的图片放在这个子容器内部，超出子容器的内容会自动隐藏
• 同时可以给react-draggable配置bounds属性，限制图片的拖拽范围就是该子容器的边界，进一步优化交互体验
  核心代码示例：

<div className="product-preview-wrapper">
  <img src="/tshirt-base.png" className="product-base-img" alt="产品基底" />
  {/* 打印区域裁剪容器 */}
  <div 
    className="print-area-container"
    style={{
      position: 'absolute',
      top: '15%',
      left: '10%',
      width: '80%',
      height: '70%',
      overflow: 'hidden',
      zIndex: 2
    }}
  >
    {/* 这里放你的Draggable + Resizable包裹的用户图片组件 */}
    <Draggable bounds="parent">
      <Resizable>
        <img src={userUploadedImg} alt="自定义图案" />
      </Resizable>
    </Draggable>
  </div>
</div>

方案3：CSS clip-path（适配简单不规则形状） #

如果你的产品可打印区域是简单的不规则形状（比如梯形、多边形），可以用clip-path直接裁剪用户上传的图片，不需要额外准备mask素材：

.user-custom-img {
  /* 示例为T恤打印区域的梯形路径，你可以用在线clip-path生成工具快速生成对应形状的路径代码 */
  clip-path: polygon(10% 15%, 90% 15%, 85% 85%, 15% 85%);
}

内容的提问来源于stack exchange，提问作者Sunil Shrestha