如何用Coze扣子搭建“图片水印助手”应用？

我在2025年5月使用扣子（coze.cn）搭建了第一个coze小应用——图片水印助手。下面是我搭建它的过程记录。

需求背景

工作中使用公司证照用于企业账户认证等场景，因操作规范和信息安全要求，需要将这些证照图片添加水印；
如果需要批量添加，普通的截屏软件手动添加文字就有点小麻烦了；
市面上批量加水印工具都要收费；

功能需求

上传图片，最好支持批量；
设定文案，不用太长；
一键在图片上添加文案水印，支持下载。

实现方案

通过 coze 应用的组件搭建前端界面元素：文字输入框、图片批量上传、合成按钮、成果列表、查看图片并下载；
使用 coze 工作流（workflow）完成图片与文字的合成。而工作流中用到“画板”插件实现图片与文字的融合效果；

交互要求

文案和图片需要必填（传），否则按钮禁用；
保底策略：即时难以关联控制按钮可用性，也要在工作流中兼容信息缺失场景；
点击按钮执行工作流过程（因为需要一定的时间）需要等待，期间禁止文案/图片修改和按钮点击；
工作流执行完毕进行结果提示（成功、异常）；
执行完毕展示添加水印后的图片列表，支持打开查看大图和下载；
执行完毕后可修改文案、增删图片；
文案清空或图片清空，按钮恢复禁用状态；

工作流配置

流程很简单：

第一步先做判断分支。

当水印文案长度≥1且图片（Array<Image>）非空时，执行“循环”节点，否则用“文本处理”节点输出文案“内容缺失”。

第二步添加循环节点。

由于输入的是多张图片（数组），因此我们需要对每一张图片都进行水印添加动作，此时需要用到“循环”。类型选择“使用数组循环”（也就是images数组里有几张图片就循环处理几次），设置开始节点“水印文案”作为中间变量，而“输出”则从循环体中的“画板”节点的输出（添加水印后的图片数组，见第三步）。

第三步配置循环体画板。

循环节点一个“循环体”窗口，在里面添加“画板”节点，实现在图片上叠加文字的效果（在图片上添加水印有其它很多方法，但笔者不太懂代码，使用AI尝试编写coze“代码”节点运行未成功，所以使用画板处理，条条大路通罗马，实现目的的方法和路径有很多种）

在画板中，输入“循环”中定义的中间变量和图片参数。双击右侧画板编辑打开全屏窗口。

设置画布为方形1024*1024。
上传一张示例图，将图片放大撑满画布。
选中图片素材的配置窗口，设置“引用”为输入的Image图片（也就是每次循环处理一张图片的URL）；填充模式及自适应（比例填充时图片会被截取，拉伸填充会变形）
插入文本区（几个文本区就会有几个水印），调整位置和旋转角度；
选中文本区，配置“引用”为输入的中间变量（也就是水印文字），设置字体、大小、颜色等信息。注意每个文本区都要相同的设置。

第四步配置变量聚合输出工作流结果文案。

循环节点后面添加文本处理节点输出固定文案“处理成功”。然后将其与前面设置的“内容缺失”的文本处理节点进行“变量聚合”，将工作流的2个分支进行合拢，然后结束流程。

PS：因为每次运行这条workflow，2条分支不可能同时运行（2个条件分支是互斥的），所以将2个文案进行聚合（取第一个非空的值）一定可以输出成功或缺失其中之一。之所以要输出文案，是用于后续页面搭建时，用来输出Toast提示，以便给用户进行及时反馈。

页面搭建

通过可视化的组件拖拉拽形式搭建页面，核心逻辑不难，只需配置2个输入项（水印文案+上传多图）+ 一个触发工作流的按钮 + 1个输出项（瀑布流，用于输出加完水印的多张图片）。

对文案输入框和图片上传组件分别设置好Label（组件标题文字）、提示语和视觉样式等。

如果想要体验更好，可以设置当工作流正在加载中时选项禁用（也就是点击按钮正在调用工作流进行处理时，让输入框和图片上传功能置灰/禁用）。

对按钮组件则需配置触发事件。最核心的是配置点击时执行“调用工作流”，选择我们配好的workflow，并将图片上传组件的值 {{ ImageUpload1.value }} 赋给images，将文本组件的值 {{ Input1.value }} 赋给watermark，以便把内容传入工作流。而失败提示和成功提示则引用工作流输出的 remark（也就是文本处理节点聚合后的内容）即可。

为了初始状态下（水印文案为空、图片未上传）时，控制按钮不要被点击（传入空信息肯定会失败），所以对按钮设置禁用“或”条件：文本框内容长度<1，图片内容长度<1，工作流执行中，三个条件满足任一则按钮不可点击。

另外，除了文本输入框、图片上传、按钮、瀑布流展示这几个组件外，实际上还有Lottie动画组件和文本显示组件，在工作流执行中用于显示以便让用户等待。

发布应用

好了，到这里加水印的应用基本配置完成。接下去就是点击发布，选择发布平台（如扣子商店、API等）设置版本号，等待审核即可完成啦！

写在最后

市面上添加水印的工具和方法很多，甚至可以用AI开发前端页面，直接在前端上传图片并完成多种样式的水印添加功能，如动态调整水印密度、文字大小等。

而本应用还有诸多不完善的细节，比如图片组件一次最多只能传5张，按钮可用性控制还有缺陷，画板限制了输出的图片不是原图尺寸而是变成固定1024²的正方形等。

本应用主要是对Coze的应用搭建平台的首次学习与实践。最重要的是不断练习和应用，举一反三，持续优化精进。