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

本文討論了對 HTML 代碼可視化文檔的需求，并提供了一個免費的 API 解決方案，可將 HTML 字符串轉(zhuǎn)換為 PNG 屏幕截圖。

自 20 世紀 80 年代后期的構(gòu)想以來，超文本標記語言 (HTML) 一直是在線顯示網(wǎng)頁的關(guān)鍵元素。這種無處不在的編程語言繼續(xù)提供詳細的框架，用于構(gòu)建我們在 Web 上看到和交互的內(nèi)容，允許我們以純文本代碼格式化文本和多媒體組件，這很簡單，可以在需要時進行更改。
HTML 的轉(zhuǎn)變
與幾乎所有編程語言的情況一樣，HTML自推出以來的幾十年中已經(jīng)轉(zhuǎn)變?yōu)榘S多新功能，以適應(yīng)典型的當代壓力，例如社區(qū)反饋/批評和相鄰 Web 開發(fā)技術(shù)的快速發(fā)展。在現(xiàn)代 HTML 代碼的輸出中，我們可以很容易地看到這種轉(zhuǎn)換的結(jié)果；例如，最近的 HTML 迭代——HTML5，于 2014 年推出——提供了用于嵌入視頻和音頻文件的新的、簡單的元素，以及移動顯示和整體移動功能中急需的改進。

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

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

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

教程
本教程的目的是提供一個簡單、免費、易于使用的 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 字符串
一個免費的 Cloudmersive API 密鑰（您可以通過訪問我們的網(wǎng)站并注冊一個免費帳戶來獲得一個）。
除了上述強制輸入外，此 API 還提供了幾個可選參數(shù)，允許進一步自定義您的輸入請求。這些可選參數(shù)包括以下內(nèi)容：

Extra loading wait：網(wǎng)頁完成加載后截屏前等待的額外毫秒數(shù)（對于非常異步的網(wǎng)站很有幫助）。
屏幕截圖高度：屏幕截圖的所需高度，以像素表示（默認為 1280 x 1024）。提供整數(shù)“0”會觸發(fā)默認設(shè)置，而提供整數(shù)“-1”會要求 API 測量并嘗試屏幕高度屏幕截圖。
屏幕截圖寬度：屏幕截圖的所需寬度，以像素表示（也默認為標準 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ù)制并粘貼以下代碼示例，并完成如上所述的強制和可選請求參數(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ù)將在下個月重置。

注留言點贊，帶你了解最流行的軟件開發(fā)知識與最新科技行業(yè)趨勢。

JavaScript 中變量的類型轉(zhuǎn)換既可以手動進行也可以顯式進行；我們只需要手動編寫函數(shù)名稱或方法。閱讀更多。

JavaScript 中變量的類型轉(zhuǎn)換既可以手動進行也可以顯式進行；我們只需要手動編寫函數(shù)名稱或方法。這被稱為顯式類型轉(zhuǎn)換，而 JavaScript 中的類型強制是 JavaScript 中變量數(shù)據(jù)類型隱式轉(zhuǎn)換的過程。

TypeScript 中的類型轉(zhuǎn)換可以是隱式的（這是在代碼執(zhí)行期間自動完成的）或顯式的（這是由開發(fā)人員完成的）。TypeScript 文件將在將代碼從JavaScript轉(zhuǎn)換為 TypeScript 后檢查錯誤，因為TypeScript具有嚴格的類型檢查。

我們知道，JavaScript中的類型轉(zhuǎn)換是指JavaScript中顯式類型轉(zhuǎn)換的過程；我們知道JavaScript中有五種數(shù)據(jù)類型，分別是String、number、boolean、object和function。但是我們只能在其中三個中使用類型轉(zhuǎn)換，它們是數(shù)字、字符串和布爾值。

在 TypeScript 中，既有雙重相等運算符（==，稱為松散相等運算符），也有三重相等運算符（===，稱為嚴格相等運算符）。我們使用這兩個運算符來比較值的相等性。

現(xiàn)在讓我們看看在 TypeScript 中閱讀不同的過程及其各自的方法。

轉(zhuǎn)換為字符串

在這個方法中，數(shù)字類型被轉(zhuǎn)換為 JavaScript 中的字符串數(shù)據(jù)類型。

讓我們借助一個示例來了解這一點：

1. String()：無論我們在String()中寫入什么，無論數(shù)據(jù)類型如何，數(shù)據(jù)類型都會轉(zhuǎn)換為字符串類型。
   讓我們先看看語法，然后是示例：

String(n)

這里括號內(nèi)的n是指要轉(zhuǎn)換成字符串的值。

現(xiàn)在讓我們在示例中實現(xiàn)語法：

String(1520)

String(1234)

輸出

"1520"

"1234"

在上面的代碼中，我們通過在字符串語法中寫入值，將值從數(shù)字轉(zhuǎn)換為字符串。在你的編輯器中運行上面的代碼以獲得更好更清晰的解釋。

在字符串轉(zhuǎn)換中，有一些方法。它們是：

• toexponential()
• toprecison()
• tofixed()

現(xiàn)在讓我們借助示例詳細了解每種方法的使用：

toexponential()

此 JavaScript 方法將數(shù)值轉(zhuǎn)換為四舍五入的字符串符號。

讓我們先看看語法，然后是示例：

n.toExponential()

這里的.toEponential 方法是用來轉(zhuǎn)換成字符串指數(shù)形式(e+number)...

您可以在此處了解更多信息。

現(xiàn)在讓我們在示例中實現(xiàn)語法：

let n=12.654;

console.log(n.toExponential());

輸出

let n=12.654;

console.log(n.toExponential());

在上面的示例中，我們輸入了一個數(shù)字，然后以指數(shù)形式打印它，其數(shù)據(jù)類型為字符串。

toFixed()

此方法將數(shù)字轉(zhuǎn)換為固定長度的字符串，我們提供：

讓我們先看看語法，然后是示例：

n.toFixed()

這里的 . toEponential方法用于將數(shù)字轉(zhuǎn)換為其字符串固定形式。

現(xiàn)在讓我們在示例中實現(xiàn)語法：

let n=152.9054;

console.log(n.toFixed());

let n1=69.156;

console.log(n1.toFixed(2));

輸出

152

69.15

在上面的例子中，我們將上面的數(shù)字轉(zhuǎn)換成字符串，通過使用.toFixed方法，我們剛剛提到了我們要打印小數(shù)點后的位數(shù)；也就是說，如果我們不提及任何內(nèi)容，那么默認情況下，用戶會將其視為零，并且不會在小數(shù)點后打印任何內(nèi)容。在你的編輯器中運行上面的代碼以獲得更好更清晰的解釋。

toPrecison()

用于打印小數(shù)點后的數(shù)字，數(shù)據(jù)類型為字符串。

讓我們先看看語法，然后是示例：

n.toExponential()

這里的 .toEponential方法是用來轉(zhuǎn)換成字符串指數(shù)形式(e+number)...

現(xiàn)在讓我們在示例中實現(xiàn)語法：

let n=12.654;

console.log(n.toFixed());

let n1=18.124;

console.log(n1.toFixed(1));

輸出

12.654

18.12

在上面的示例中，我們首先將數(shù)字 (n) 作為輸入，然后使用該 .toFixed()函數(shù)，我們將數(shù)字從字符串中固定打印出來。在固定函數(shù)中，如果我們在可選參數(shù)中沒有提及任何內(nèi)容，那么它會將其視為零并打印整個值。如果我們在可選參數(shù)括號中提到任何數(shù)字，那么它只會從小數(shù)部分中排除值的計數(shù)，并將打印轉(zhuǎn)換后的字符串的其余部分。

到數(shù)字類型轉(zhuǎn)換

在這個方法中，我們將看到如何借助各種內(nèi)置類型將字符串轉(zhuǎn)換為數(shù)字數(shù)據(jù)類型。

數(shù)字轉(zhuǎn)換方法如下：

1. number()
2. parseFloat()
3. parseInt()

現(xiàn)在讓我們詳細了解它們中的每一個：

1.number()

在此方法中，我們只是將字符串值和布爾值轉(zhuǎn)換為數(shù)字數(shù)據(jù)類型。

讓我們先看看語法，然后是示例：

Number(n)

這里使用 Number 方法將 (n) 可以是字符串或布爾值轉(zhuǎn)換為數(shù)字數(shù)據(jù)類型。

現(xiàn)在讓我們在示例中實現(xiàn)語法：

Number('123');

Number('1520');

Number('5969');

Number(actual);// true in numeric form is 1 while false in numeric form is 0

輸出

123

1520

5969

1

Number() 我們已經(jīng)通過編寫函數(shù)將值從字符串或布爾數(shù)據(jù)類型顯式轉(zhuǎn)換為數(shù)字數(shù)據(jù)類型。在你的編輯器中運行上面的代碼以獲得更好更清晰的解釋。

2.parseInt()

它用于僅將數(shù)字字符串值轉(zhuǎn)換為字符串，條件是第一部分必須是數(shù)字類型。

句法：：

parseInt(numeric_stringpart,radixpart)

例子：

parseInt(1520nlcdj)

parseInt('qwer@12222')

輸出

1520

Nan

在第二個輸出行中，輸出將是 Nan，因為它不滿足第一部分必須是數(shù)字類型的條件。

3.parseFloat()

它用于將字符串轉(zhuǎn)換為其浮點數(shù)。

讓我們看看下面的語法，然后是一個例子：

parseFloat(n)

這里 n 是將被轉(zhuǎn)換為數(shù)字數(shù)據(jù)類型的變量。

例子：

parseFloat('126.7655')

輸出

126.7655

在上面的示例中，我們已將字符串轉(zhuǎn)換為其父數(shù)字形式。

類型Boolean轉(zhuǎn)換

在此，我們將值從數(shù)字類型轉(zhuǎn)換為布爾類型。

句法：

Boolean(n)

這里括號內(nèi)的 n 值將被轉(zhuǎn)換為 boolean 類型。

現(xiàn)在讓我們看一個例子：

Boolean(1520)

Boolean(' ')

Boolean('yash')

Boolean(null)

輸出

true

true

true

在你的編輯器中運行上面的代碼以獲得更好更清晰的解釋。

JavaScript 中的類型強制

類型強制本身就是類型轉(zhuǎn)換，但這里完成的類型轉(zhuǎn)換是隱式的；轉(zhuǎn)換和強制轉(zhuǎn)換是相同的，唯一的區(qū)別是隱式和顯式類型轉(zhuǎn)換。

類型強制也用于相同的數(shù)據(jù)類型：數(shù)字、字符串和布爾值。眾所周知，TypeScript 是 JavaScript 本身的超集，因此任何有效的 JavaScript 代碼都是有效的 TypeScript 代碼。

TypeScript 中的類型強制僅強制轉(zhuǎn)換為字符串、數(shù)字和布爾基本類型，就像在類型轉(zhuǎn)換中一樣。在 TypeScript 中，我們無法將值類型強制轉(zhuǎn)換為對象或函數(shù)。

TypeScript 有兩種典型的強制轉(zhuǎn)換形式，即隱式強制轉(zhuǎn)換和顯式強制轉(zhuǎn)換。

現(xiàn)在讓我們看看如何在每種類型中執(zhí)行類型強制轉(zhuǎn)換：

字符串強制

它用于將非字符串值轉(zhuǎn)換為字符串類型。

讓我們借助一個例子來理解這一點：

console.log('15'+20);

console.log('29'+null);

console.log(50+'45'+null)

輸出

'1520'

'29null'

'5045null'

字符串強制轉(zhuǎn)換是使用JavaScript中的+ 運算符執(zhí)行的。因此，如果我們對任何字符串使用 + 運算符，它將被轉(zhuǎn)換為字符串類型。

數(shù)字強制

然后使用帶有變量的數(shù)學(xué)運算符，我們可以將任何非數(shù)字類型轉(zhuǎn)換為數(shù)字類型。但是，我們不能在數(shù)字強制轉(zhuǎn)換中使用 + 運算符。

讓我們借助一個例子來理解這一點：

console.log('34'-34);

console.log('6'*8);

console.log('45'/45);

console.log('15'%5);

輸出

0

48

1

0

在這里，我們使用數(shù)學(xué)運算符將非數(shù)值轉(zhuǎn)換為數(shù)值；我們可以不使用 + 運算符。在你的編輯器中運行上面的代碼以獲得更好更清晰的解釋。

布爾強制

在這種類型的連接中，布爾值被轉(zhuǎn)換為數(shù)學(xué)值。

讓我們借助一個例子來理解這一點：

console.log(false-5);

console.log(true+5);

輸出

-5

6

因為我們知道在數(shù)值上true的值為1，false在數(shù)值上的值為0，所以我們可以根據(jù)它來計算。

結(jié)論

• 類型轉(zhuǎn)換和類型強制只是一回事。但是，隱式類型轉(zhuǎn)換和顯式類型轉(zhuǎn)換之間存在差異。
• 類型轉(zhuǎn)換和類型強制僅適用于數(shù)字、字符串和布爾數(shù)據(jù)類型。
• 類型轉(zhuǎn)換在 javascript 中非常重要，因為它可以幫助我們在需要時轉(zhuǎn)換類型。
• TypeScript 中的類型轉(zhuǎn)換和強制轉(zhuǎn)換，簡單來說就是將一個值的數(shù)據(jù)類型轉(zhuǎn)換為另一種數(shù)據(jù)類型，如整數(shù)類型轉(zhuǎn)換為字符串類型、布爾類型轉(zhuǎn)換為字符串類型等。
• 隱式類型轉(zhuǎn)換和顯式類型轉(zhuǎn)換之間的主要區(qū)別在于，隱式轉(zhuǎn)換由 JavaScript 編譯器在幕后自動完成，而顯式轉(zhuǎn)換則由我們手動完成。

avaScript為unicode編碼轉(zhuǎn)換為中文

var str = "\u6211\u662Funicode\u7F16\u7801";

關(guān)于這樣的數(shù)據(jù)轉(zhuǎn)換為中文問題，常用的以下方法。

1. eval解析或new Function("'+ str +'")()
var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = eval("'" + str + "'"); // "我是unicode編碼"

2. unescape 解析

方法一:

var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = unescape(str.replace(/\u/g, "%u")); // "我是unicode編碼"

方法二: