JS如何導出Div的內容為圖片
最近因為項目需要，研究了幾天用js導出頁面上的div為圖片。項目需求是這樣的，一個頁面上有統計圖和統計表，另外一部分是地圖，當用戶點擊導出報告時，需要將頁面內容導出到Excel，統計表可以從後臺查出列表，然後以表格形式導出；統計通采用的echarts，可以轉換為base64編碼，然後後臺處理之後導出。但是地圖這塊就有點難了，首先地圖不是一張圖片，其次地圖的圖片不在本地，所以雖然我自己的功能沒實現，但是研究出了div導出為圖片，需要的就拿走。
div導出為圖片，並不是直接完成的，原理可以認為截取屏幕上div大小，然後轉換為圖片格式。現在有兩種方式，首先是將div轉換為HTML5的畫布，然後畫布轉換成base64編碼，傳回後臺進行處理；第二種是先把div內容轉成svg，然後再轉換成base64。
第一種
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" >
$(document).ready(
這個方式有要註意的問題，是在canvas.toDataUrl()這個方法，這個方法是把canvas轉換成base64碼，如果你的div中是圖片的話，那麽這個方法是執行不成功的。另外，上面提到的導出地圖的功能，因為地圖是多張圖片，同時圖片在服務器上，所以涉及到跨域和多張圖片信息的問題，這時候也是執行不成功的。
第二種
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<body>
<h2>Output Image:</h2>
<script>
function cutDiv(){
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;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.crossOrigin="anonymous";
img.src = "data:image/svg+xml,<svg xmlns=‘http://www.w3.org/2000/svg‘></svg>";
ctx.drawImage(img, 0, 0);
var canvasbase = canvas.toDataURL();
alert(canvasbase);
}
</script>
<div id="div">
<img src="Koala.jpg" style="width:400px;height:300px"/>
</div>
<input type="button" value="click" onclick="cutDiv()"/>
</body>
</html>
這種是先把html拼接為svg，然後將組成的svg串賦給一個img的src，然後在畫布上畫出這個img，最後執行canvas的toDataUrl方法來獲得base64碼。
這種方式也沒能成功導出地圖，地圖是openlayers做的，本身就是svg，在ctx.drawImage()方法執行時，出現錯誤，所以沒成功。
對於其他比較常用的情況，上面兩種轉換效果還是蠻好的，如果有用得到的只管拿走；如果上面寫的有什麽不合適的，請批評指正；另外如果有做過導出地圖為圖片到word文檔的，希望您能不吝賜教，謝謝。
轉自：http://blog.csdn.NET/fengyao1995/article/details/51842486
JS如何導出Div的內容為圖片