三、背景透明的问题
这个其实很简单，因为它默认是透明的，html2canvas中有一个参数background就可以添加背景色，如下：
| 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后面即可。
