自 20 世紀(jì) 80 年代后期的構(gòu)想以來，超文本標(biāo)記語言 (HTML) 一直是在線顯示網(wǎng)頁的關(guān)鍵元素。這種無處不在的編程語言繼續(xù)提供詳細(xì)的框架，用于構(gòu)建我們在 Web 上看到和交互的內(nèi)容，允許我們以純文本代碼格式化文本和多媒體組件，這很簡單，可以在需要時進(jìn)行更改。

HTML 的轉(zhuǎn)變

與幾乎所有編程語言的情況一樣，HTML自推出以來的幾十年中已經(jīng)轉(zhuǎn)變?yōu)榘S多新功能，以適應(yīng)典型的當(dāng)代壓力，例如社區(qū)反饋/批評和相鄰 Web 開發(fā)技術(shù)的快速發(fā)展。在現(xiàn)代 HTML 代碼的輸出中，我們可以很容易地看到這種轉(zhuǎn)換的結(jié)果；例如，最近的 HTML 迭代——HTML5，于 2014 年推出——提供了用于嵌入視頻和音頻文件的新的、簡單的元素，以及移動顯示和整體移動功能中急需的改進(jìn)。

當(dāng)然，新元素和顯示質(zhì)量的改進(jìn)并不是網(wǎng)站的 HTML 代碼會隨著時間的推移可靠地改變的唯一原因。網(wǎng)站不斷設(shè)計和重新設(shè)計，可能是為了創(chuàng)新，也是為了響應(yīng)用戶反饋產(chǎn)生的趨勢。例如，2014 年開發(fā)的網(wǎng)站很可能融合了各種當(dāng)代設(shè)計趨勢，而與當(dāng)年 HTML5 中引入的變化無關(guān)。在該項目之后的幾年里，該網(wǎng)站的開發(fā)人員可能會發(fā)現(xiàn)自己至少多次重復(fù)了他們的 HTML 代碼的一部分，同時一直在為不可避免的 HTML6 發(fā)布和最終合并其新的和改進(jìn)的功能而構(gòu)建。

鑒于 HTML 開發(fā)中的這些自然進(jìn)展，出現(xiàn)了一個重要問題：我們?nèi)绾斡行У馗櫤陀涗浳覀兙W(wǎng)站 HTML 代碼的增長？考慮到 HTML 輸出的固有視覺特性，答案相對簡單。我們可以輕松地以靜態(tài)二維圖像文件（屏幕截圖）的形式存儲 HTML 網(wǎng)站的迭代，并且我們可以相對輕松地以編程方式完成此轉(zhuǎn)換。

網(wǎng)頁截圖

捕獲 HTML 屏幕截圖具有大量實際的業(yè)務(wù)應(yīng)用程序。當(dāng)為網(wǎng)站編寫新的 HTML 代碼時，渲染該 HTML 代碼輸出的圖像作為一種簡單、易于共享的“狀態(tài)檢查”，用于檢查其內(nèi)容在給定時間點如何顯示在 Web 瀏覽器上。出于同樣的原因，這樣的屏幕截圖提供了一種極好的方法來快速測試 HTML 代碼的新的、實驗性的迭代，使開發(fā)人員可以輕松地創(chuàng)建和存儲開發(fā)中項目的各種版本——包括成功的和不成功的。屏幕截圖還為實時網(wǎng)站中不可避免的問題提供了一種理想的可視化記錄方式，從而更容易跟蹤棘手的問題并跟蹤它們在不同設(shè)備、瀏覽器或操作系統(tǒng)上的顯示方式。

教程

本教程的目的是提供一個簡單、免費(fèi)、易于使用的 API 解決方案，用于在 Java 中將 HTML 字符串轉(zhuǎn)換為 PNG 屏幕截圖。此 API 將完整呈現(xiàn)網(wǎng)站，返回 HTML 在常規(guī) Web 瀏覽器視圖中顯示內(nèi)容的屏幕截圖。它支持所有現(xiàn)代、高級的 Web 開發(fā)功能，包括與 HTML5、CSS、JavaScript等相關(guān)的功能。為方便起見，頁面下方提供了現(xiàn)成的 Java 代碼示例，以幫助您輕松構(gòu)建 API 調(diào)用。

該接口有兩個必填的請求參數(shù)，包括以下內(nèi)容：

你的 HTML 字符串

一個免費(fèi)的 Cloudmersive API 密鑰（您可以通過訪問我們的網(wǎng)站并注冊一個免費(fèi)帳戶來獲得一個）。

除了上述強(qiáng)制輸入外，此 API 還提供了幾個可選參數(shù)，允許進(jìn)一步自定義您的輸入請求。這些可選參數(shù)包括以下內(nèi)容：

• Extra loading wait：網(wǎng)頁完成加載后截屏前等待的額外毫秒數(shù)（對于非常異步的網(wǎng)站很有幫助）。
• 屏幕截圖高度：屏幕截圖的所需高度，以像素表示（默認(rèn)為 1280 x 1024）。提供整數(shù)“0”會觸發(fā)默認(rèn)設(shè)置，而提供整數(shù)“-1”會要求 API 測量并嘗試屏幕高度屏幕截圖。
• 屏幕截圖寬度：屏幕截圖的所需寬度，以像素表示（也默認(rèn)為標(biāo)準(zhǔn) 1280 x 1024 測量值）。提供整數(shù)“0”或“-1”會產(chǎn)生與上述“屏幕截圖高度”參數(shù)中所述相同的結(jié)果。

在其響應(yīng)中，此 API 將提供一個包含新 PNG 文件編碼的字符串。

要在Java中構(gòu)建 API 調(diào)用，第一步是安裝 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'
}

安裝完成后，剩下的就是復(fù)制并粘貼以下代碼示例，并完成如上所述的強(qiáng)制和可選請求參數(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 屏幕截圖。

注意： 您的免費(fèi)層級 API 密鑰將提供每月 800 次 API 調(diào)用的限制，無需承諾。一旦達(dá)到該限制，您的總數(shù)將在下個月重置。