诚之和:在前端开发怎么实现使用动态图像生成文档？生成图像文档方法分享！

Adobe Document Generation最吸引人的方面之一是它非常灵活。API 可以真正增强最终结果的一个方面是能够在模板中包含图像。在典型的用例中，您将提供在与 API 一起使用的数据中定义的静态图像。在这篇博文中，我将展示一个更高级的例子——动态生成图像，在我们的例子中是动态生成图表。

基础知识

在我们进入更高级的演示之前，让我们快速介绍一下基础知识。（我的同事非常深入地研究了文档生成和图像，您也应该检查一下。）正如我们的文档所述，在 Word 模板中使用动态图像需要几个步骤。

首先，您将图像添加到文档中。您选择什么图像并不重要，它只是一个占位符，但您需要根据需要将其放置在文档中，并确保已按预期调整其大小。完成后，右键单击图像并选择“编辑替换文字”选项。在该替代文本中，您提供 JSON：

JSON：

{
  "location-path" : "logo" ,
  "image-props"：{
       "alt-text": "This is an alt-text for the image placeholder"
  }
}

该location-path属性必须指向包含图像数据的数据中使用的键值。例如，给定上述location-path值，我与 API 一起使用的数据可能如下所示：

JSON:

{  "name" : "Some Random Name" ,
    "age" : 48 ,
    "logo" : "<base64 encoded image>"
}

如示例所示，图像数据必须是图像的 Base64 编码版本。如果你以前从未见过，它看起来有点像这样：

 数据：图像/png；base64，一个非常长的字符列表

您还可以使用 Word Add On 为您插​​入图像。如果您添加的示例数据包含 Base64 值，则您可以在“高级”选项卡的“图像”部分中选择它。

所以此时，您已经能够动态更改最终结果 PDF 或 Word 文档中的图像。为此，您需要换出值。想象一下，对于文档中的图像，您有两个选项，一张猫的图片或一张狗的图片。在 Word 模板中，您嵌入了一个占位符图像并将其链接到一个值pet. 在将您的模板和数据发送到 Document Generation API 之前，您将使用正确的值：

// data is the object you will pass to the API, it's got stuff already
if(thisPersonIsVeryCool) {
    data.pet = catBase64ImageData;
} else {
    data.pet = dogBase64ImageData;
}