[FR]: Watermark 组件能够提供获取水印处理后图片文件的能力

[huangmingfu]

这个功能解决了什么问题？

功能描述 (Feature Description)

希望 @nutui/nutui-react-taro 的 Watermark 组件能够提供获取水印处理后图片文件的能力。

问题背景 (Problem Background)

在实际业务场景中，我们需要：

1. 为用户上传的图片添加水印
2. 同时上传原图和水印图到后端服务器
3. 原图用于内部处理，水印图用于对外展示

目前 Watermark 组件只能在页面上显示水印效果，但无法获取到处理后的图片文件，这限制了其在实际业务中的应用。

你期望的组件设计是怎样的？

期望的解决方案 (Proposed Solution)

希望 Watermark 组件能够提供以下 API：

interface WatermarkProps {
  // 现有属性...
  onWatermarkGenerated?: (watermarkedImageUrl: string) => void; // 水印生成完成回调
}

或者提供 ref 方法：

interface WatermarkRef {
  getWatermarkedImage: () => Promise<string>;
}

技术实现建议 (Implementation Suggestions)

可以参考以下技术方案：

1. 使用 Canvas 2D API 绘制水印
2. 通过 canvas.toDataURL() 或 Taro 的 canvasToTempFilePath 导出图片
3. 返回 base64 或临时文件路径

业务场景 (Use Cases)

• 图片社交应用：用户上传照片，添加水印后分享，同时保存原图和水印图
• 电商平台：商品图片需要添加店铺水印，但后台管理需要原图
• 内容创作平台：创作者上传作品，平台自动添加版权水印

替代方案 (Alternatives Considered)

目前我们的项目中实现了一个自定义的 WatermarkImage 组件来解决这个问题，但希望官方能够提供标准化的解决方案。

附加信息 (Additional Context)

• 当前使用版本：@nutui/[email protected]
• 开发环境：Taro 4 + React 18
• 目标平台：微信小程序

这个功能对于需要图片处理的业务场景非常重要，希望官方能够考虑添加此功能。

相关链接 (Related Links)

• Watermark 组件文档