有一個神奇的庫：html2canvas。
這個庫簡潔優美，使用方便。
下面先看一個小demo，它需要用到一張圖片：haha.jpg。
<html>
<head>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<div id="mydiv">
<h1>天下大勢,為我所控</h1>
<img src="haha.jpg">
</div>
</body>
<script>
html2canvas(document.querySelector("#mydiv"), {
onrendered: function (canvas) {
document.body.appendChild(canvas)
}
})
</script>
</html>
html轉成圖片這個功能並不是一種規范，那么html2canvas這個庫是如何做到“截圖”的呢？
實際上，html2canvas並沒有截圖，它是通過DOM讀取元素的屬性、樣式等所有信息，以此為基礎自己畫出來的。
明白了原理，也就很容易想到html2canvas無法截圖視頻，也無法截圖SWF等內容。JS所能獲取的全部信息就是html2canvas所能獲取到的全部信息。
html2canvas並非能獲取任意元素的截圖，它具有以下局限：
- 不支持iframe
- 不支持跨域圖片
- 不能在瀏覽器插件中使用
- 部分瀏覽器上不支持SVG圖片
- 不支持Flash
- 不支持古代瀏覽器和IE
如果想把canvas導出為圖片，可以使用另外一個庫：canvas2image
更多信息，參考官方文檔：html2canvas
還有另外一種將HTML頁面內容導出為圖片的方式，這種方式利用了img元素的src屬性，src屬性可以是base64編碼的字符串，也可以是SVG格式的字符串。
<!DOCTYPE html>
<html>
<body><h2>Input Div:</h2>
<div id="div">
<p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>
TRY</span></p>
<p><b>By Dion</b></p>
</div>
<h2>Output Image:</h2>
<script>
var divContent = document.getElementById("div").innerHTML;
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>"
+ "<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' " +
"style='font-size:16px;font-family:Helvetica'>"
+ divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
document.getElementsByTagName('body')[0].appendChild(img);</script>
</body>
</html>