html2canvas腳本實現將html內容轉換canvas內容

時間 2019-12-09

標籤 html2canvas html canvas 腳本現將內容轉換欄目 HTML 简体版

原文原文鏈接

在開始使用html2canvas以前，有一些關於html2canvas及其一些限制的好處。css

介紹

該腳本容許您直接在用戶瀏覽器上截取網頁或部分網頁的「屏幕截圖」。屏幕截圖基於DOM，所以它可能不是真實表示的100％準確，由於它沒有製做實際的屏幕截圖，而是根據頁面上可用的信息構建屏幕截圖。html

這個怎麼運做

該腳本遍歷其加載的頁面的DOM。它收集有關那裏全部元素的信息，而後用它來構建頁面的表示。換句話說，它實際上並不截取頁面的截圖，而是根據從DOM讀取的屬性構建它的表示。

所以，它只能正確呈現它理解的屬性，這意味着有許多CSS屬性不起做用。
canvas

限制

腳本使用的全部圖像都須要位於相同的原點下，以便可以在沒有代理幫助的狀況下讀取它們。一樣，若是您canvas 在頁面上有其餘元素，這些元素已被污染了跨源內容，它們將變得髒，而且再也不被html2canvas讀取。小程序

該腳本不會呈現插件內容，如Flash或Java小程序。瀏覽器

用法實例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html2canvas</title>
	<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
    <h1>html內容</h1>
	<div id="htmlcanvas" style="padding: 10px; background: red">
		<h4 style="color: #fff; ">one！two！!three!!!</h4>
		<h2 style="text-align:center;">那一瞬間有一百萬可能</h2>
    </div>
    <h1>canvas內容</h1>
    <div id="canid"></div>
	<script>
		html2canvas(document.querySelector("#htmlcanvas")).then(canvas => {
            document.getElementById("canid").appendChild(canvas);
		});
    </script>
</body>
</html>

效果圖:app

想了解html2canvas更多的夥伴們，能夠去訪問官網：http://html2canvas.hertzen.com/getting-startedflex

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。