在表单中显示图像

以下是如何通过将图像嵌入表单中来在表单中显示图像。 对于 Base64 图像，您可以使用自定义 JavaScript 显示它们。

嵌入图像

在本教程中，您将学习如何使用 HTML 组件在表单中嵌入图像。

1. 在与您使用的表单相同的文件夹中添加图像文件。
   在此示例中，我们上传了一个名为 display_PDF_file_form.jpg的图像。
2. 将 HTML 元素 组件添加到表单中。
3. 在“ 显示” 选项卡的“ 内容”下，编写以下代码片段： <img id="myimage" src="display_PDF_file_form.jpg">。 将 display_PDF_file_form.jpg 替换为要显示的图像的名称。
   您可以使用 width 和 height 属性进一步调整表单中图像的宽度和高度。

显示 Base64 图像

在本教程中，您将学习如何使用 UiPath 表单动态显示 Base64 图像。 自动化涉及创建包含一个 HTML 元素和两个按钮的自定义表单文件，以允许用户选择要显示的图像。 此外，还将创建一个单独的工作流将图像转换为 Base64 格式。 在其他触发器工作流中调用此转换工作流，以在表单中显示图像之前对图像进行预处理。

先决条件： 添加要在 Studio 项目文件夹中显示的图像。

1. 创建一个新表单，并向其中添加一个 HTML 元素 和两个 按钮 组件。
   1. 编辑 HTML 元素 并在 内容 字段中添加提供的 HTML 代码，使用 myImage 作为自定义 JavaScript 的占位符名称：

      <img id='myImage'  width='100' height='100' />

   2. 将两个按钮的 “操作” 设置为“事件”，使它们触发显示两个不同的图像。
2. 在“主要”工作流中，添加“显示表单” 和 “运行本地触发器” 活动，以显示表单并启用项目中的所有触发器。
3. 创建名为 ConvertImageToBase64 的单独工作流，以将项目图像转换为 Base64 编码。
   1. 在 Data Manager中创建两个 String 参数：

      名称	方向	数据类型	默认值	描述
      in_Image	输入	String	"uipath.png" （要在用户单击按钮之前显示的默认图像）	此参数保存要转换的图像的路径。
      Base64Image	输出	String	不适用	此参数保存转换后的结果，即 Base64 图像。

   2. 添加“加载图像” 活动以加载图像并将其存储在局部变量中。 在 文件名字 段中，输入在 Data Manager 中创建的 in_Image 。 在“输出”字段中，创建一个名为 loadedImage的局部变量。 将变量类型设置为 UiPath.Core.Image
   3. 添加“分配”活动。 在“保存位置” 字段中输入 Base64Image 输出参数，并在“要保存的值” 字段中输入局部图像变量和用于转换的 .Base64 方法。
      在此示例中，输入 loadedImage.Base64 。
4. 在创建触发器工作流之前，请创建一个名为 templateSRC 且 默认 值为 "data:image/png;base64,<base64>"的字符串全局变量。
   templateSRC 变量充当在 HTML 元素 组件中声明的来源属性 (src) 值的模板。
5. 为第一个名为 showUiPathShortLogoTrigger的 按钮 组件创建触发器工作流。
   1. 添加 表单触发器活动 ，并将 事件 设置为您添加的其中一个按钮。
   2. 添加一个“调用工作流”活动，并调用将图像转换为 Base64 编码的工作流。 使用以下参数调用工作流：

      名称	方向	类型	值
      in_Image	输入	String	uipath.png （用于转换然后在表单中显示的图像）
      Base64Image	输出	String	base64str （局部 String 变量）

6. 添加 “ 运行表单脚本” 活动，以使用自定义 JavaScript 显示 Base64 图像。 在“来源”字段中，使用以下脚本：

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"

   在上面的脚本中， template_SRC 值中的 <base64> 占位符将替换为实际的 Base64 图像数据 (base64str)。 然后，将生成的修改后的 template_SRC 分配为 ID 为 'myImage'的 HTML 图像元素的源 (src) 值。 此操作会动态更新图像源，以显示所需的 Base64 编码图像。
7. 为另一个按钮创建另一个触发器工作流。
   在此示例中，您可以将工作流命名为 showUiPathLogoTrigger 。
   1. 添加 表单触发器活动 ，并将 事件 设置为您添加的其中一个按钮。
   2. 添加 “调用工作流文件”活动并使用以下参数调用 ConvertImageToBase64 工作流：

      名称	方向	类型	值
      in_Image	输入	String	uipath2.png （用于转换然后在表单中显示的图像）
      Base64Image	输出	String	base64str （局部 String 变量）

8. 添加 “ 运行表单脚本” 活动，以使用自定义 JavaScript 显示 Base64 图像。 在“来源”字段中，使用以下脚本：

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"

   该脚本通过将 <base64> 占位符替换为实际的 Base64 图像数据来修改 template_SRC 值，从而动态更新图像源。

工作流示例

要按照这些步骤自行试用本教程，请参阅 此示例项目。