HTML 页面转化为图片
大约 2 分钟
html 转化为图片
一、背景
最近在制作视频，计划选取几张图片作为封面图，想着每天只要换换着颜色和文字就行了，奈何现在的我 PS 早已经忘完了，于是秉着没什么是代码搞不定的思路就直接上代码呗，css 调了半天终于达到了差不多能用的样子了，可是 html 毕竟不是图片想要用还得截图才行，于是就开始研究怎么将 html 转化为图片。
二、实现步骤
1. 引入 html2canvas 库
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
2. html 示例
我们先构造一个简单的 html，包含一个内容 div 和一个触发图像下载的按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html to image download</title>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<!-- HTML 内容 -->
<div id="content" style="background-color: lightblue;">
<h1>Hello, World!</h1>
<p>This is some sample HTML content.</p>
</div>
<!-- 触发下载的按钮 -->
<button onclick="downloadImage()">下载图片</button>
</body>
</html>
3. JavaScript 转化部分（重要）
function downloadImage() {
// 获取 HTML 内容
var content = document.getElementById('content');
// 使用 html2canvas 将 HTML 内容渲染到画布上
html2canvas(content).then(function(canvas) {
// 将画布转换为数据 URL
var dataUrl = canvas.toDataURL('image/png');
// 创建临时锚元素
var link = document.createElement('a');
// 使用所需的文件名设置下载属性
link.download = 'html_to_image.png';
// 使用数据 URL 设置 href 属性
link.href = dataUrl;
// 将锚元素附加到文档中
document.body.appendChild(link);
// 触发锚元素上的点击事件
link.click();
// 从文档中移除临时锚元素
document.body.removeChild(link);
});
}
说明
我们定义了一个 downloadImage 函数，该函数在按钮被点击时启动转换过程。
我们使用 html2canvas 将 #content div 中的 HTML 内容渲染到画布上。
画布然后被转换为代表 PNG 格式图片的数据 URL。
我们创建一个临时锚元素（a）来设置下载链接。
将锚元素附加到文档中，并触发点击事件以开始下载。
最后，从文档中删除临时锚元素。