html2canvas.js没有为动态生成的内容捕获图像

我使用vivagraphs生成动态svg元素但是当我单击捕获按钮时，没有显示任何节点和边缘。

这是脚本：

$(document).ready(function() { //var testdiv = document.getElementById("testdiv"); $('#btn').click(function(){ html2canvas($("#graph1"), { onrendered: function(canvas) { var myImage = canvas.toDataURL("img/png"); window.open(myImage); } }); }); 

当我检查元素时，svg在渲染图形后显示，但快照不包含节点和边缘。

有没有替代html2canvas或我可以解决这个问题？

Answer 1

如果你想将图像从canvas保存到某种图像格式，这对你有所帮助。 希望这会帮助你。

 $(document).ready(function() { $('#btn').click(function(){ html2canvas(document.getElementById('graph1'), { onrendered: function(canvas) { var cs = new CanvasSaver('save_img.php',canvas,'myimage') } }); }); }); 

这里的CanvasSaver（）函数定义如下所示，其中三个参数是一个php文件，它将图像从RAW日期处理为某种图像格式。 我将写这个脚本部分的’save_img.php’代码并将该文件保存在根目录中。

 function CanvasSaver(url, cnvs, fname) { this.url = url; if(!cnvs || !url) return; fname = fname || 'picture'; var data = cnvs.toDataURL("image/png"); data = data.substr(data.indexOf(',') + 1).toString(); var dataInput = document.createElement("input") ; dataInput.setAttribute("name", 'imgdata') ; dataInput.setAttribute("value", data); dataInput.setAttribute("type", "hidden"); var nameInput = document.createElement("input") ; nameInput.setAttribute("name", 'name') ; nameInput.setAttribute("value", fname + '.jpg'); var myForm = document.createElement("form"); myForm.method = 'post'; myForm.action = url; myForm.appendChild(dataInput); myForm.appendChild(nameInput); document.body.appendChild(myForm) ; myForm.submit() ; document.body.removeChild(myForm) ; } 

在上面的脚本中，无论您想要从浏览器保存的图像格式，都在此函数上方的脚本中提供该图像扩展

 nameInput.setAttribute("value", fname + '.jpg'); 

现在这里是’save_img.php’的代码并将其保存在根目录中。

Answer 2

你可能在html2canvas的github页面上使用beta版本的lib，goto发行版并下载稳定的alpha版本