日分享最新，最流行的軟件開發知識與最新行業趨勢，希望大家能夠一鍵三連，多多支持，跪求關注，點贊，留言。

本文討論了對 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 調用的限制，無需承諾。一旦達到該限制，您的總數將在下個月重置。