文章目录
- 概述
- 网页的转换
- html2canvas的使用
- 导入
- 导入HTML2canvas库
- 函数定义
- nginx部署
- 编写控制截图网页代码
- iframe
- 网页控制代码
- 测试
- 说明
概述
- 本文简述如何使用nginx+html2canvas将任意网页html转为png图片
网页的转换
- 如果是本地网页，直接进行nginx反向代理就行
- 如果不是本地网页，需要简单利用工具转为本地网页
html2canvas的使用
导入
- 导入，不能使用在线的库，只能下载到本地才能导入，因为会有同源限制，否则会报跨域错误。
- 下载导入
- 由于在线使用的方式为：
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
所以我们只需要点击衔接，把js文件保存到本地即可
衔接为：
> https://html2canvas.hertzen.com/dist/html2canvas.min.js
导入HTML2canvas库
- 下载完毕后，导入库，我这里放在js目录下
网页中引入
<script src="./js/html2canvas.min.js"></script>
函数定义
在页面中js部分定义函数，实现截图功能
window.onload = function() {
var element = document.body;
html2canvas(element, {
useCORS: true,
}).then(function(canvas) {
var link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = '网页截图.png';
link.click();
});
};
nginx部署
由于要实现自定义图片张数，并且要实现能够正常访问外部的数据
解决跨域问题
所以需要在nginx中配置可以跨域
比如这个需要截图的网页是index.html
就需要反向代理到nginx中htm也买了中index.html中
并且配置可以跨域
代码为：
location / {
root html;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
如图
这样就实现了反向代理与解决了跨域问题
编写控制截图网页代码
iframe
这里使用iframe引入外部网页，实现控制iframe里面引用的网页就是需要同源，也就是需要解决我们上面提到已经解决到的跨域问题
网页控制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>网页转图片</title>
<style>
/* 按钮样式 */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* 输入框样式 */
.input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
transition: border-color 0.3s ease;
}
/* 输入框容器样式 */
.input-container {
margin-bottom: 10px;
}
</style>
<script>
function refreshIframe() {
var delayInput = document.getElementById("delayInput");
var countInput = document.getElementById("countInput");
var delay = parseInt(delayInput.value);
var count = parseInt(countInput.value);
if (isNaN(delay) || delay <= 0 || isNaN(count) || count <= 0) {
alert("请输入大于0的数字！");
return;
}
var iframe = document.getElementById("myIframe");
var remainingCount = count;
function refresh() {
if (remainingCount > 0) {
iframe.contentWindow.location.reload();
remainingCount--;
document.getElementById("remainingCount").innerText = remainingCount;
} else {
clearInterval(interval);
}
}
var interval = setInterval(refresh, delay * 1000);
}
</script>
</head>
<body>
<div class="input-container">
<label for="delayInput">刷新延迟时间（秒）：</label>
<input type="number" id="delayInput" class="input" placeholder="输入刷新延迟时间" />
</div>
<div class="input-container">
<label for="countInput">刷新次数：</label>
<input type="number" id="countInput" class="input" placeholder="输入刷新次数" />
</div>
<button onclick="refreshIframe()" class="button">刷新</button>
<p>剩余次数: <span id="remainingCount">0</span></p>
<iframe id="myIframe" src="http://localhost:90" width="100%" height="2500px"></iframe>
</body>
</html>
###网页控制代码解释说明
<iframe id="myIframe" src="http://localhost:90" width="100%" height="2500px"></iframe>
引入我们上面的网页要截图的网页，这里需要开启nginx才能截图
网页运行效果为
由于简化处理，这里的延迟时间需要根据直接的点电脑性能来进行配置
测试
出现的截图就会出现在下载这里
说明
- 用的是chrome浏览器
- 要允许浏览器的自动下载，运行下载多个文件等权限
- 如果截图不完整需要自己调整或者缩放浏览器的大小。
