本文討論了對 html 代碼可視化文檔的需求，并提供了一個免費的 API 解決方案，可將 HTML 字符串轉換為 PNG 屏幕截圖。
自 20 世紀 80 年代后期的構想以來，超文本標記語言 (HTML) 一直是在線顯示網(wǎng)頁的關鍵元素。這種無處不在的編程語言繼續(xù)提供詳細的框架，用于構建我們在 Web 上看到和交互的內(nèi)容，允許我們以純文本代碼格式化文本和多媒體組件，這很簡單，可以在需要時進行更改。
HTML 的轉變
與幾乎所有編程語言的情況一樣，HTML自推出以來的幾十年中已經(jīng)轉變?yōu)榘S多新功能，以適應典型的當代壓力，例如社區(qū)反饋/批評和相鄰 Web 開發(fā)技術的快速發(fā)展。在現(xiàn)代 HTML 代碼的輸出中，我們可以很容易地看到這種轉換的結果；例如，最近的 HTML 迭代——HTML5，于 2014 年推出——提供了用于嵌入視頻和音頻文件的新的、簡單的元素，以及移動顯示和整體移動功能中急需的改進。
當然，新元素和顯示質(zhì)量的改進并不是網(wǎng)站的 HTML 代碼會隨著時間的推移可靠地改變的唯一原因。網(wǎng)站不斷設計和重新設計，可能是為了創(chuàng)新，也是為了響應用戶反饋產(chǎn)生的趨勢。例如，2014 年開發(fā)的網(wǎng)站很可能融合了各種當代設計趨勢，而與當年 HTML5 中引入的變化無關。在該項目之后的幾年里，該網(wǎng)站的開發(fā)人員可能會發(fā)現(xiàn)自己至少多次重復了他們的 HTML 代碼的一部分，同時一直在為不可避免的 HTML6 發(fā)布和最終合并其新的和改進的功能而構建。
鑒于 HTML 開發(fā)中的這些自然進展，出現(xiàn)了一個重要問題：我們?nèi)绾斡行У馗櫤陀涗浳覀兙W(wǎng)站 HTML 代碼的增長？考慮到 HTML 輸出的固有視覺特性，答案相對簡單。我們可以輕松地以靜態(tài)二維圖像文件（屏幕截圖）的形式存儲 HTML 網(wǎng)站的迭代，并且我們可以相對輕松地以編程方式完成此轉換。
網(wǎng)頁截圖
捕獲 HTML 屏幕截圖具有大量實際的業(yè)務應用程序。當為網(wǎng)站編寫新的 HTML 代碼時，渲染該 HTML 代碼輸出的圖像作為一種簡單、易于共享的“狀態(tài)檢查”，用于檢查其內(nèi)容在給定時間點如何顯示在 Web 瀏覽器上。出于同樣的原因，這樣的屏幕截圖提供了一種極好的方法來快速測試 HTML 代碼的新的、實驗性的迭代，使開發(fā)人員可以輕松地創(chuàng)建和存儲開發(fā)中項目的各種版本——包括成功的和不成功的。屏幕截圖還為實時網(wǎng)站中不可避免的問題提供了一種理想的可視化記錄方式，從而更容易跟蹤棘手的問題并跟蹤它們在不同設備、瀏覽器或操作系統(tǒng)上的顯示方式。
教程
本教程的目的是提供一個簡單、免費、易于使用的 API 解決方案，用于在 JAVA 中將 HTML 字符串轉換為 PNG 屏幕截圖。此 API 將完整呈現(xiàn)網(wǎng)站，返回 HTML 在常規(guī) Web 瀏覽器視圖中顯示內(nèi)容的屏幕截圖。它支持所有現(xiàn)代、高級的 Web 開發(fā)功能，包括與 HTML5、css、JavaScript等相關的功能。為方便起見，頁面下方提供了現(xiàn)成的 Java 代碼示例，以幫助您輕松構建 API 調(diào)用。
該接口有兩個必填的請求參數(shù)，包括以下內(nèi)容：
你的 HTML 字符串
一個免費的 Cloudmersive API 密鑰（您可以通過訪問我們的網(wǎng)站并注冊一個免費帳戶來獲得一個）。
除了上述強制輸入外，此 API 還提供了幾個可選參數(shù)，允許進一步自定義您的輸入請求。這些可選參數(shù)包括以下內(nèi)容：
Extra loading wait：網(wǎng)頁完成加載后截屏前等待的額外毫秒數(shù)（對于非常異步的網(wǎng)站很有幫助）。
屏幕截圖高度：屏幕截圖的所需高度，以像素表示（默認為 1280 x 1024）。提供整數(shù)“0”會觸發(fā)默認設置，而提供整數(shù)“-1”會要求 API 測量并嘗試屏幕高度屏幕截圖。
屏幕截圖寬度：屏幕截圖的所需寬度，以像素表示（也默認為標準 1280 x 1024 測量值）。提供整數(shù)“0”或“-1”會產(chǎn)生與上述“屏幕截圖高度”參數(shù)中所述相同的結果。
在其響應中，此 API 將提供一個包含新 PNG 文件編碼的字符串。
要在Java中構建 API 調(diào)用，第一步是安裝 SDK。這可以使用 Maven 來完成，方法是首先將以下引用添加到存儲庫中pom.xml：
jitpack.io
https://jitpack.io
之后，將下面的引用添加到依賴項中pom.xml：
com.github.Cloudmersive
Cloudmersive.APIClient.Java
v4.25
要改為使用 Gradle 安裝SDK，請在根目錄build.gradle（存儲庫末尾）中添加您的引用：
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
然后添加依賴項build.gradle：
dependencies {
implementation 'com.github.Cloudmersive:Cloudmersive.APIClient.Java:v4.25'
}
安裝完成后，剩下的就是復制并粘貼以下代碼示例，并完成如上所述的強制和可選請求參數(shù)：
// 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();
}
一旦你完成了這一步，你就大功告成了——你現(xiàn)在可以調(diào)用這個 API 并輕松地將 HTML 字符串呈現(xiàn)為 PNG 屏幕截圖。
注意： 您的免費層級 API 密鑰將提供每月 800 次 API 調(diào)用的限制，無需承諾。一旦達到該限制，您的總數(shù)將在下個月重置。
