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

本文讨论了对 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 调用的限制，无需承诺。一旦达到该限制，您的总数将在下个月重置。

注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。

JavaScript 中变量的类型转换既可以手动进行也可以显式进行；我们只需要手动编写函数名称或方法。阅读更多。

JavaScript 中变量的类型转换既可以手动进行也可以显式进行；我们只需要手动编写函数名称或方法。这被称为显式类型转换，而 JavaScript 中的类型强制是 JavaScript 中变量数据类型隐式转换的过程。

TypeScript 中的类型转换可以是隐式的（这是在代码执行期间自动完成的）或显式的（这是由开发人员完成的）。TypeScript 文件将在将代码从JavaScript转换为 TypeScript 后检查错误，因为TypeScript具有严格的类型检查。

我们知道，JavaScript中的类型转换是指JavaScript中显式类型转换的过程；我们知道JavaScript中有五种数据类型，分别是String、number、boolean、object和function。但是我们只能在其中三个中使用类型转换，它们是数字、字符串和布尔值。

在 TypeScript 中，既有双重相等运算符（==，称为松散相等运算符），也有三重相等运算符（===，称为严格相等运算符）。我们使用这两个运算符来比较值的相等性。

现在让我们看看在 TypeScript 中阅读不同的过程及其各自的方法。

转换为字符串

在这个方法中，数字类型被转换为 JavaScript 中的字符串数据类型。

让我们借助一个示例来了解这一点：

1. String()：无论我们在String()中写入什么，无论数据类型如何，数据类型都会转换为字符串类型。
   让我们先看看语法，然后是示例：

String(n)

这里括号内的n是指要转换成字符串的值。

现在让我们在示例中实现语法：

String(1520)

String(1234)

输出

"1520"

"1234"

在上面的代码中，我们通过在字符串语法中写入值，将值从数字转换为字符串。在你的编辑器中运行上面的代码以获得更好更清晰的解释。

在字符串转换中，有一些方法。它们是：

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

现在让我们借助示例详细了解每种方法的使用：

toexponential()

此 JavaScript 方法将数值转换为四舍五入的字符串符号。

让我们先看看语法，然后是示例：

n.toExponential()

这里的.toEponential 方法是用来转换成字符串指数形式(e+number)...

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

现在让我们在示例中实现语法：

let n=12.654;

console.log(n.toExponential());

输出

let n=12.654;

console.log(n.toExponential());

在上面的示例中，我们输入了一个数字，然后以指数形式打印它，其数据类型为字符串。

toFixed()

此方法将数字转换为固定长度的字符串，我们提供：

让我们先看看语法，然后是示例：

n.toFixed()

这里的 . toEponential方法用于将数字转换为其字符串固定形式。

现在让我们在示例中实现语法：

let n=152.9054;

console.log(n.toFixed());

let n1=69.156;

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

输出

152

69.15

在上面的例子中，我们将上面的数字转换成字符串，通过使用.toFixed方法，我们刚刚提到了我们要打印小数点后的位数；也就是说，如果我们不提及任何内容，那么默认情况下，用户会将其视为零，并且不会在小数点后打印任何内容。在你的编辑器中运行上面的代码以获得更好更清晰的解释。

toPrecison()

用于打印小数点后的数字，数据类型为字符串。

让我们先看看语法，然后是示例：

n.toExponential()

这里的 .toEponential方法是用来转换成字符串指数形式(e+number)...

现在让我们在示例中实现语法：

let n=12.654;

console.log(n.toFixed());

let n1=18.124;

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

输出

12.654

18.12

在上面的示例中，我们首先将数字 (n) 作为输入，然后使用该 .toFixed()函数，我们将数字从字符串中固定打印出来。在固定函数中，如果我们在可选参数中没有提及任何内容，那么它会将其视为零并打印整个值。如果我们在可选参数括号中提到任何数字，那么它只会从小数部分中排除值的计数，并将打印转换后的字符串的其余部分。

到数字类型转换

在这个方法中，我们将看到如何借助各种内置类型将字符串转换为数字数据类型。

数字转换方法如下：

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

现在让我们详细了解它们中的每一个：

1.number()

在此方法中，我们只是将字符串值和布尔值转换为数字数据类型。

让我们先看看语法，然后是示例：

Number(n)

这里使用 Number 方法将 (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() 我们已经通过编写函数将值从字符串或布尔数据类型显式转换为数字数据类型。在你的编辑器中运行上面的代码以获得更好更清晰的解释。

2.parseInt()

它用于仅将数字字符串值转换为字符串，条件是第一部分必须是数字类型。

句法：：

parseInt(numeric_stringpart,radixpart)

例子：

parseInt(1520nlcdj)

parseInt('qwer@12222')

输出

1520

Nan

在第二个输出行中，输出将是 Nan，因为它不满足第一部分必须是数字类型的条件。

3.parseFloat()

它用于将字符串转换为其浮点数。

让我们看看下面的语法，然后是一个例子：

parseFloat(n)

这里 n 是将被转换为数字数据类型的变量。

例子：

parseFloat('126.7655')

输出

126.7655

在上面的示例中，我们已将字符串转换为其父数字形式。

类型Boolean转换

在此，我们将值从数字类型转换为布尔类型。

句法：

Boolean(n)

这里括号内的 n 值将被转换为 boolean 类型。

现在让我们看一个例子：

Boolean(1520)

Boolean(' ')

Boolean('yash')

Boolean(null)

输出

true

true

true

在你的编辑器中运行上面的代码以获得更好更清晰的解释。

JavaScript 中的类型强制

类型强制本身就是类型转换，但这里完成的类型转换是隐式的；转换和强制转换是相同的，唯一的区别是隐式和显式类型转换。

类型强制也用于相同的数据类型：数字、字符串和布尔值。众所周知，TypeScript 是 JavaScript 本身的超集，因此任何有效的 JavaScript 代码都是有效的 TypeScript 代码。

TypeScript 中的类型强制仅强制转换为字符串、数字和布尔基本类型，就像在类型转换中一样。在 TypeScript 中，我们无法将值类型强制转换为对象或函数。

TypeScript 有两种典型的强制转换形式，即隐式强制转换和显式强制转换。

现在让我们看看如何在每种类型中执行类型强制转换：

字符串强制

它用于将非字符串值转换为字符串类型。

让我们借助一个例子来理解这一点：

console.log('15'+20);

console.log('29'+null);

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

输出

'1520'

'29null'

'5045null'

字符串强制转换是使用JavaScript中的+ 运算符执行的。因此，如果我们对任何字符串使用 + 运算符，它将被转换为字符串类型。

数字强制

然后使用带有变量的数学运算符，我们可以将任何非数字类型转换为数字类型。但是，我们不能在数字强制转换中使用 + 运算符。

让我们借助一个例子来理解这一点：

console.log('34'-34);

console.log('6'*8);

console.log('45'/45);

console.log('15'%5);

输出

0

48

1

0

在这里，我们使用数学运算符将非数值转换为数值；我们可以不使用 + 运算符。在你的编辑器中运行上面的代码以获得更好更清晰的解释。

布尔强制

在这种类型的连接中，布尔值被转换为数学值。

让我们借助一个例子来理解这一点：

console.log(false-5);

console.log(true+5);

输出

-5

6

因为我们知道在数值上true的值为1，false在数值上的值为0，所以我们可以根据它来计算。

结论

• 类型转换和类型强制只是一回事。但是，隐式类型转换和显式类型转换之间存在差异。
• 类型转换和类型强制仅适用于数字、字符串和布尔数据类型。
• 类型转换在 javascript 中非常重要，因为它可以帮助我们在需要时转换类型。
• TypeScript 中的类型转换和强制转换，简单来说就是将一个值的数据类型转换为另一种数据类型，如整数类型转换为字符串类型、布尔类型转换为字符串类型等。
• 隐式类型转换和显式类型转换之间的主要区别在于，隐式转换由 JavaScript 编译器在幕后自动完成，而显式转换则由我们手动完成。

avaScript为unicode编码转换为中文

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

关于这样的数据转换为中文问题，常用的以下方法。

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编码"

方法二: