最近写项目有用到html2canvas.js，可以实现页面的截图功能，但遭遇了许多的坑，特此写一篇随笔记录一下。
在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、svg标签无法截取等问题，下面详细的说明一下。
一、导入html2canvas.js
这个不需要多说，可以从github上获取： https://github.com/niklasvh/html2canvas
也可以直接导入链接：
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>使用起来也非常简单，具体的API可以去网上查找，生成png图片使用“image/png”即可。
其中$("#xxx")为你想要截取的div，外面可以通过jquery获取它，当然document获取也是可以的。
html2canvas($("#xxx"), {
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png");
window.location.href = url;
}
});其它类型的图片如jpg，为image/jpeg等等，可自行查询API。
到这里其实简单的截图已经完成了，如果界面稍微复杂一点的话，可能就会出现各种坑，下面一个一个解决。
二、svg无法截取的问题
当我们截取一个div时，如果这个div中存在svg标签，一般情况下是截取不到的，比如截取一个流程图，得到的是下面这个样子：
可以看到，流程图的线没有截取到，也就是svg没有截取到，这时的解决方法是把svg转换成canvas再进行截图即可，直接上代码。
这里的each循环是循环所有的svg标签，将它们全部转换为canvas
if (typeof html2canvas !== 'undefined') {
//以下是对svg的处理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = cloneDom.find('svg');
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim(); var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 798;
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);
});
}
这里需要用到canvg.js，以及它的依赖文件rgbcolor.js，网上可以直接下载，也可以直接导入。
三、背景透明的问题
这个其实很简单，因为它默认是透明的，html2canvas中有一个参数background就可以添加背景色，如下：
