概述
- 本文簡述如何使用nginx+html2canvas將任意網(wǎng)頁html轉(zhuǎn)為png圖片
網(wǎng)頁的轉(zhuǎn)換
- 如果是本地網(wǎng)頁，直接進(jìn)行nginx反向代理就行
- 如果不是本地網(wǎng)頁，需要簡單利用工具轉(zhuǎn)為本地網(wǎng)頁
html2canvas的使用
導(dǎo)入
- 導(dǎo)入，不能使用在線的庫，只能下載到本地才能導(dǎo)入，因?yàn)闀?huì)有同源限制，否則會(huì)報(bào)跨域錯(cuò)誤。
- 下載導(dǎo)入
- 由于在線使用的方式為：
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
所以我們只需要點(diǎn)擊銜接，把js文件保存到本地即可
銜接為：
> https://html2canvas.hertzen.com/dist/html2canvas.min.js
導(dǎo)入HTML2canvas庫
- 下載完畢后，導(dǎo)入庫，我這里放在js目錄下
-
網(wǎng)頁中引入
<script src="./js/html2canvas.min.js"></script>
函數(shù)定義
在頁面中js部分定義函數(shù)，實(shí)現(xiàn)截圖功能
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 = '網(wǎng)頁截圖.png';
link.click();
});
};
nginx部署
由于要實(shí)現(xiàn)自定義圖片張數(shù)，并且要實(shí)現(xiàn)能夠正常訪問外部的數(shù)據(jù)
解決跨域問題
所以需要在nginx中配置可以跨域
比如這個(gè)需要截圖的網(wǎng)頁是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';
}
如圖
這樣就實(shí)現(xiàn)了反向代理與解決了跨域問題
編寫控制截圖網(wǎng)頁代碼
iframe
這里使用iframe引入外部網(wǎng)頁，實(shí)現(xiàn)控制iframe里面引用的網(wǎng)頁就是需要同源，也就是需要解決我們上面提到已經(jīng)解決到的跨域問題
網(wǎng)頁控制代碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>網(wǎng)頁轉(zhuǎn)圖片</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的數(shù)字！");
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">刷新延遲時(shí)間（秒）：</label>
<input type="number" id="delayInput" class="input" placeholder="輸入刷新延遲時(shí)間" />
</div>
<div class="input-container">
<label for="countInput">刷新次數(shù)：</label>
<input type="number" id="countInput" class="input" placeholder="輸入刷新次數(shù)" />
</div>
<button onclick="refreshIframe()" class="button">刷新</button>
<p>剩余次數(shù): <span id="remainingCount">0</span></p>
<iframe id="myIframe" src="http://localhost:90" width="100%" height="2500px"></iframe>
</body>
</html>
###網(wǎng)頁控制代碼解釋說明
<iframe id="myIframe" src="http://localhost:90" width="100%" height="2500px"></iframe>
引入我們上面的網(wǎng)頁要截圖的網(wǎng)頁，這里需要開啟nginx才能截圖
網(wǎng)頁運(yùn)行效果為
由于簡化處理，這里的延遲時(shí)間需要根據(jù)直接的點(diǎn)電腦性能來進(jìn)行配置
測試
文章來源：http://www.zghlxwxcb.cn/news/detail-795935.html
出現(xiàn)的截圖就會(huì)出現(xiàn)在下載這里文章來源地址http://www.zghlxwxcb.cn/news/detail-795935.html
說明
- 用的是chrome瀏覽器
- 要允許瀏覽器的自動(dòng)下載，運(yùn)行下載多個(gè)文件等權(quán)限
- 如果截圖不完整需要自己調(diào)整或者縮放瀏覽器的大小。
到了這里，關(guān)于使用nginx+HTML2canvas將任意html網(wǎng)頁轉(zhuǎn)為png圖片自定義張數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
