-
canvg.js及html2canvas.js下载
资源介绍
html2canvas实现js实现截图功能；
如果html标签里有svg标签， 目前htm2canvas不支持svg标签。
这个情况下就需要先把svg处理成html2canvas能处理标签。
策略是 svg 转换成 canvas ，html2canvas 转换完成，再恢复svg。这里需要这个插件canvg（svg转canvas）
var nodesToRecover = [];
var nodesToRemove = [];
var $svgElem = $targetElem.find('svg');
$svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var canvas = document.createElement('canvas');
canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true});
//将svg转换成canvas
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
html2canvas($targetElem, {
useCORS: true,
onrendered: function(canvas) {
var base64Image = canvas.toDataURL('image/png').substring(22);
//恢复svg
nodesToRemove.forEach(function(pair) {
pair.parent.removeChild(pair.child);
});
nodesToRecover.forEach(function(pair) {
pair.parent.appendChild(pair.child);
});
})