Dify应用实战(7) - 图片生成(下)

图片模板请求体构造#

昨天只说了需要构建一个图片模板的请求体JSON。但这个JSON为何是这样构建的呢？如果靠手写那肯定是不现实的，好在方法也很简单。

我们先在figma里做一个图片的布局，如示例里面，有一个背景图，再有一段文案（为了教学，尽量简单处理了，实际应用时，只是元素对象多一点而已）。先新建一个”Design file”

在空白画布上添加一个Section，注意将Dimensions的W和H（即图片的宽和高）设置为你最终生成的图片的分辨率大小。并将Posion的X和Y都设置为0，即左上角对齐原点。

好了，图片第一层为背景层，准备好一张与图片大小一致的底图，通过工具栏的Image进行插入。Position也设置为0，这样就对齐了。

在背景图上添加”TEXT”，并将其拖拽到画布合适的位置，注意文本的Posion位置，和长宽值，是否合适。可以事先添加与文案长度差不多的文字内容，来观察是否能一行显示，还是要多行。一定要确保最终生成时不要超出背景图片的区域。

本文的示例就这两个元素，实际工作，需要酌情修改设计。这一步如果有设计师朋友帮忙，那就小菜一碟了。

有了设计稿，现在利用上面让准备的插件，就能将设计转化成JSON。选中整个设计，左上角的菜单，转到Plugins菜单项，点击”imgrender - Batch auto-generate”。便会打开一个小对话框，点”Output”按钮。如果提示”Successful!”字样，就说明好了。

这时，需要打开一个文本编辑软件，按Ctrl V就可看到全部内容。如果过程中有问题，看提示解决。大概是导出只能是一层，如果设计放在多层，是不能全部导出的。

1
{
2
  "width": 420,
3
  "height": 600,
4
  "backgroundColor": "#ffffff",
5
  "images": [
6
    {
7
      "x": 0,
8
      "y": 0,
9
      "width": 420,
10
      "height": 600,
11
      "url": "背景图URL",
12
      "zIndex": 1
13
    }
14
  ],
15
  "texts": [
16
    {
17
      "x": 60,
18
      "y": 60,
19
      "text": "文案文案文案文案文案",
20
      "width": 240,
21
      "font": "SourceHanSansSC-Normal",
22
      "fontSize": 16,
23
      "textAlign": "left",
24
      "zIndex": 4,
25
      "color": "#000000"
26
    }
27
  ]
28
}

有了这个设计模板JSON，现在就可以去Dify的模板节点去拼接了。

拆分成几个部分就行了，记得images里面的url改为一个imgrender服务能访问到的公网背景图片路径。

texts里面的元素，text部分，用Jinja模板语法，将前序节点的输出string替换为上述JSON里面的”文案文案文案文案文案”。

HTTP请求构造#

再坚持一下，马上就要成功了。

“HTTP请求”按上篇中的截图设置。

API方法选择POST，地址为imgrender的服务地址：https://api.imgrender.net/open/v1/pics ，添加鉴权API-key，改为自定义，Header项填入X-API-Key，key就粘贴前面新建应用时得到的新增密钥。

保存后，继续设置HTTP请求。 HEADERS增加key为Content-Type，value为application/json; charset=utf-8

BODY，选择raw，值框中输入/ 后选择合并完的output

如果有使用HTTP服务的经验，这一点非常容易做。

获取结果图片#

这个”代码执行”节点，继续使用Python，代码非常简单，就是从imgrender的API请求结果中，获得图片URL。

好了，今天的内容终于结束了。其中最繁琐的是图片模板的处理。全程无尿点，累并快乐着。