在表单中显示图像

以下是如何通过将图像嵌入表单中来在表单中显示图像。 对于 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. 在数据管理器中创建两个String参数：

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

   2. 添加“加载图像”活动，以加载图像并将图像存储在局部变量中。在“文件名”字段中，输入在数据管理器中创建的in_Image 。在“输出”字段中，创建一个名为loadedImage局部变量。将变量类型设置为UiPath.Core.Image

   3. 添加“赋值”活动。在“保存到”字段中，输入Base64Image输出参数，在“要保存的值”字段中，输入本地图像变量和要对其进行转换的.Base64方法。

      在此示例中，输入 loadedImage.Base64 。

4. 在创建触发器工作流之前，使用默认值"data:image/png;base64,<base64>"创建一个名为templateSRC的字符串全局变量。

   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 值，从而动态更新图像源。

工作流示例

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