在线html转为图片工具
1. 在线html转为图片工具:cloudconvert
1.1. 介绍
CloudConvert是一个在线文档转换器。 偶然中看到，觉得不错，记录一下。
1.2. 使用方法
- 自己创建一个html文件，比如：
test.html，内容如下(当然不是手搓，这个让ai生成)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff; /* 浅蓝色背景 */
color: #333;
margin: 0;
padding: 20px;
}
h1, h2 {
color: #1e90ff; /* 深蓝色标题 */
}
p {
margin: 10px 0;
}
div {
margin: 20px 0;
}
div.chat-box {
border: 2px solid #1e90ff; /* 深蓝色边框 */
border-radius: 10px;
width: 300px;
height: 200px;
overflow-y: auto;
background-color: #ffffff; /* 白色背景 */
}
div.chat-box div {
padding: 10px;
margin: 5px;
border-radius: 5px;
}
div.chat-box div.user {
background-color: #add8e6; /* 浅蓝色背景 */
}
div.chat-box div.assistant {
background-color: #87cefa; /* 天蓝色背景 */
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table th, table td {
border: 1px solid #1e90ff; /* 深蓝色边框 */
padding: 10px;
text-align: center;
}
table th {
background-color: #1e90ff; /* 深蓝色背景 */
color: #fff; /* 白色文字 */
}
table tr:nth-child(even) {
background-color: #f0f8ff; /* 浅蓝色背景 */
}
ul {
list-style-type: disc;
padding-left: 20px;
}
ul li {
margin: 5px 0;
color: #1e90ff; /* 深蓝色文字 */
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>你好，世界</h2>
下面是微信聊天对话框：
<div style="border: 1px solid black; width: 300px; height: 200px;">
<div style="background-color: #f5f5f5; padding: 10px;">
<strong>用户：</strong>
<span>你好</span>
</div>
<div style="background-color: #e0e0e0; padding: 10px;">
<strong>助手：</strong>
<span>你好！有什么我可以帮助你的吗？</span>
</div>
</div>
<p>下面是一个简单的表格：</p>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
<p>下面是一个简单的列表：</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</body>
</html>
打开浏览器，效果还可以：
-
html已经准备好了，下面来生成图片：
第一步：打开网站，选择文件：
第二步：等待转换：
最后一步：下载图片：
跟之前的文档是一样的，还是蛮好用的。
