使用Html2canvas截屏
Html2canvas加載後將會瀏覽頁面上的所有元素，集合所有頁面元素的信息，然後用戶就可以通過Html2canvas把整個頁面截圖下來。
換句話說，Html2canvas不會實際上的截圖，而是通過從DOM讀取的足夠信息去建立一個頁面的展示鏡像。
這就會導致Html2canvas只會渲染它認識的正確的DOM元素屬性，還有很多CSS屬性是不會生效的，也就渲染不出來了。
下面舉個簡單例子
完整html代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/html2canvas.min.js"></script>
</head>
<body>
<div id="box" style="margin: 20px; padding: 10px; background: orange;">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
</div>
<script type="text/javascript">
function AJRD_printDom(id){
html2canvas(document.getElementById(id), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
var dataUrl = canvas.toDataURL(); //生成base64圖片數據
var oPop = window.open(dataUrl,"","width=1000, height=500, top=100, left=0");
}
});
}
onload=function(){
AJRD_printDom('box');
}
</script>
</body>
</html>
看下效果
我們可以看到id爲box的div被打印成了一張圖片
再來看看截屏函數
function AJRD_printDom(id){
html2canvas(document.getElementById(id), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
var dataUrl = canvas.toDataURL(); //生成base64圖片數據
var oPop = window.open(dataUrl,"","width=1000, height=500, top=100, left=0");
}
});
}你會發現這個截屏並不是真正意義上的截屏，輸入參數並不是像素寬高，而是一個dom節點。
html2canvas將這個dom節點再次渲染生成一張圖片。當拿到圖片之後，這裏是將它在新窗口中顯示出來，你也可以將它保存到任何地方！