前言：最近需要將網頁或者網頁的一個元素導出成png圖片，從網上搜索了一些信息，但是針對嵌套svg的網頁，沒有很好的解決方案。經過自己整理，完美解決了網頁導出png圖片的問題。其中需要使用的js插件有jquery.js, html2canvas.js, canvg.js,rgbcolor.js。
步驟：1.將所有svg轉爲canvas替換原來的svg Dom對象。2.將沒有svg的網頁保存爲canvas，3.保存網頁爲png圖片，4.替換回原來的svg Dom對象。
具體實現代碼：
/**
* 導出網頁爲png，直接調用exportData即可
* @param containerId 需要截取成圖片的dom的id
* @returns
*/
function exportData(containerId) {
MyHtml2Canvas(containerId, function(canvas){
//導出
var fileName = 'export.png'; //導出文件默認名稱
if (window.navigator.msSaveOrOpenBlob) {
var blob = canvas.toBlob(null, 'image/png', 1.0);
navigator.msSaveBlob(blob, fileName);
}
else{
var link = document.createElement("a");
link.setAttribute("href", canvas.toDataURL());
link.setAttribute("download", fileName);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
}
/**
* 說明：解決嵌套svg的網頁導出問題，一般網頁可以直接使用html2canvas函數解決。
* @param containerId 需要截取成圖片的dom的id
* @param backcall 轉換爲canvas後的回調函數
* @returns
*/
function MyHtml2Canvas(containerId, backcall)
{
scrollTo(0, 0);
var container = "#"+containerId;//content爲需要截取成圖片的dom的id
var tmpDiv = "divCanvasTempContainer_"; //臨時div
$("body").append("<div id='"+tmpDiv+"' style='display:none;'></div>");
if (typeof html2canvas !== 'undefined') {
//以下是對svg的處理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = $(container).find('svg');
var lstSvgHtml = [];
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = outerHTML(node).trim();
lstSvgHtml.push(svg);
//var svg = parentNode.html().trim();
//創建臨時的canvas
$("#"+tmpDiv).html('<canvas class="tempCanvas"></canvas>');
var canvas = $("#"+tmpDiv+" canvas")[0];
canvg(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
html2canvas(document.querySelector(container), {
onrendered: backcall
});
}
//把添加的刪除掉，再把刪除掉的添加回來
for( var i = 0; i < nodesToRecover.length; ++i)
{
var $parent = $(nodesToRecover[i].parent);
$parent.find(".tempCanvas").remove();
console.log(nodesToRecover[i].child);
$parent.append(nodesToRecover[i].child);
}
//刪除臨時div
$("#"+tmpDiv).remove();
}
備註：其中創建了一個默認的div，而不是直接用document直接創建canvas，是因爲canvg.js轉換svg成canvas時出錯。