html2canvas(cloneDom, {
onrendered: function(canvas) {
var url =canvas.toDataURL("image/png");
},
background:"#fafafa"
}); 四、只能截取可视部分的问题
如果需要截取的div超出了界面，可能会遇到截取不全的问题，如上图，只有一半的内容，这是因为看不到的部分被隐藏了，而html2canvas是无法截取隐藏的dom的。
所以此时的解决办法是使用克隆，将需要截取的部分克隆一份放在页面底层，再使用html2canvas截取这个完整的div，截取完成后再remove这部分内容即可，完整代码如下：
function showQRCode() {
scrollTo(0, 0); //克隆节点，默认为false，即不复制方法属性，为true是全部复制。
var cloneDom = $("#d1").clone(true);
//设置克隆节点的z-index属性，只要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "#fafafa",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": 798,
"width": 650
});
if (typeof html2canvas !== 'undefined') {
//以下是对svg的处理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = cloneDom.find('svg');//divReport为需要截取成图片的dom的id
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);
});
//将克隆节点动态追加到body后面。
$("body").append(cloneDom);
html2canvas(cloneDom, {
onrendered: function(canvas) {
var url =canvas.toDataURL("image/png");
window.location.href = url ;
cloneDom.remove(); //清空克隆的内容
},
background:"#fafafa"
});
}
}
这里外面首先将要截取的div克隆一份，并将z-index设置为最小，避免引起界面的不美观，然后是对svg进行的处理，上面已经分析过了，最后将克隆节点追加到body后面即可。
在onrendered中，我们可以直接使用location.href跳转查看图片，可以进行保存操作，也可以将url写入img的src中显示在界面上，如 $(‘#imgId’).attr(‘src’,url);
最后可以在界面展示刚刚截取到的图片：
