日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

本文讨论了对 HTML 代码可视化文档的需求，并提供了一个免费的 API 解决方案，可将 HTML 字符串转换为 PNG 屏幕截图。

自 20 世纪 80 年代后期的构想以来，超文本标记语言 (HTML) 一直是在线显示网页的关键元素。这种无处不在的编程语言继续提供详细的框架，用于构建我们在 Web 上看到和交互的内容，允许我们以纯文本代码格式化文本和多媒体组件，这很简单，可以在需要时进行更改。
HTML 的转变
与几乎所有编程语言的情况一样，HTML自推出以来的几十年中已经转变为包含许多新功能，以适应典型的当代压力，例如社区反馈/批评和相邻 Web 开发技术的快速发展。在现代 HTML 代码的输出中，我们可以很容易地看到这种转换的结果；例如，最近的 HTML 迭代——HTML5，于 2014 年推出——提供了用于嵌入视频和音频文件的新的、简单的元素，以及移动显示和整体移动功能中急需的改进。

当然，新元素和显示质量的改进并不是网站的 HTML 代码会随着时间的推移可靠地改变的唯一原因。网站不断设计和重新设计，可能是为了创新，也是为了响应用户反馈产生的趋势。例如，2014 年开发的网站很可能融合了各种当代设计趋势，而与当年 HTML5 中引入的变化无关。在该项目之后的几年里，该网站的开发人员可能会发现自己至少多次重复了他们的 HTML 代码的一部分，同时一直在为不可避免的 HTML6 发布和最终合并其新的和改进的功能而构建。

鉴于 HTML 开发中的这些自然进展，出现了一个重要问题：我们如何有效地跟踪和记录我们网站 HTML 代码的增长？考虑到 HTML 输出的固有视觉特性，答案相对简单。我们可以轻松地以静态二维图像文件（屏幕截图）的形式存储 HTML 网站的迭代，并且我们可以相对轻松地以编程方式完成此转换。

网页截图
捕获 HTML 屏幕截图具有大量实际的业务应用程序。当为网站编写新的 HTML 代码时，渲染该 HTML 代码输出的图像作为一种简单、易于共享的“状态检查”，用于检查其内容在给定时间点如何显示在 Web 浏览器上。出于同样的原因，这样的屏幕截图提供了一种极好的方法来快速测试 HTML 代码的新的、实验性的迭代，使开发人员可以轻松地创建和存储开发中项目的各种版本——包括成功的和不成功的。屏幕截图还为实时网站中不可避免的问题提供了一种理想的可视化记录方式，从而更容易跟踪棘手的问题并跟踪它们在不同设备、浏览器或操作系统上的显示方式。

教程
本教程的目的是提供一个简单、免费、易于使用的 API 解决方案，用于在 Java 中将 HTML 字符串转换为 PNG 屏幕截图。此 API 将完整呈现网站，返回 HTML 在常规 Web 浏览器视图中显示内容的屏幕截图。它支持所有现代、高级的 Web 开发功能，包括与 HTML5、CSS、JavaScript等相关的功能。为方便起见，页面下方提供了现成的 Java 代码示例，以帮助您轻松构建 API 调用。

该接口有两个必填的请求参数，包括以下内容：

你的 HTML 字符串
一个免费的 Cloudmersive API 密钥（您可以通过访问我们的网站并注册一个免费帐户来获得一个）。
除了上述强制输入外，此 API 还提供了几个可选参数，允许进一步自定义您的输入请求。这些可选参数包括以下内容：

Extra loading wait：网页完成加载后截屏前等待的额外毫秒数（对于非常异步的网站很有帮助）。
屏幕截图高度：屏幕截图的所需高度，以像素表示（默认为 1280 x 1024）。提供整数“0”会触发默认设置，而提供整数“-1”会要求 API 测量并尝试屏幕高度屏幕截图。
屏幕截图宽度：屏幕截图的所需宽度，以像素表示（也默认为标准 1280 x 1024 测量值）。提供整数“0”或“-1”会产生与上述“屏幕截图高度”参数中所述相同的结果。
在其响应中，此 API 将提供一个包含新 PNG 文件编码的字符串。

要在Java中构建 API 调用，第一步是安装 SDK。这可以使用 Maven 来完成，方法是首先将以下引用添加到存储库中pom.xml：

<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>

之后，将下面的引用添加到依赖项中pom.xml：

<dependencies>
<dependency>
<groupId>com.github.Cloudmersive</groupId>
<artifactId>Cloudmersive.APIClient.Java</artifactId>
<version>v4.25</version>
</dependency>
</dependencies>

要改为使用 Gradle 安装SDK，请在根目录build.gradle（存储库末尾）中添加您的引用：

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}


然后添加依赖项build.gradle：

dependencies {
implementation 'com.github.Cloudmersive:Cloudmersive.APIClient.Java:v4.25'
}


安装完成后，剩下的就是复制并粘贴以下代码示例，并完成如上所述的强制和可选请求参数：

// Import classes:
//import com.cloudmersive.client.invoker.ApiClient;
//import com.cloudmersive.client.invoker.ApiException;
//import com.cloudmersive.client.invoker.Configuration;
//import com.cloudmersive.client.invoker.auth.*;
//import com.cloudmersive.client.ConvertWebApi;

ApiClient defaultClient = Configuration.getDefaultApiClient();

// Configure API key authorization: Apikey
ApiKeyAuth Apikey = (ApiKeyAuth) defaultClient.getAuthentication("Apikey");
Apikey.setApiKey("YOUR API KEY");
// Uncomment the following line to set a prefix for the API key, e.g. "Token" (defaults to null)
//Apikey.setApiKeyPrefix("Token");

ConvertWebApi apiInstance = new ConvertWebApi();
HtmlToPngRequest input = new HtmlToPngRequest(); // HtmlToPngRequest | HTML to PNG request parameters
try {
byte[] result = apiInstance.convertWebHtmlToPng(input);
System.out.println(result);
} catch (ApiException e) {
System.err.println("Exception when calling ConvertWebApi#convertWebHtmlToPng");
e.printStackTrace();
}


一旦你完成了这一步，你就大功告成了——你现在可以调用这个 API 并轻松地将 HTML 字符串呈现为 PNG 屏幕截图。

注意： 您的免费层级 API 密钥将提供每月 800 次 API 调用的限制，无需承诺。一旦达到该限制，您的总数将在下个月重置。