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

【问题标题】：html2canvas.js not capturing image for dynamically generated contenthtml2canvas.js 没有为动态生成的内容捕获图像
【发布时间】：2014-05-22 12:46:50
【问题描述】：

我正在使用 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 的替代品，或者我可以解决这个问题吗？

【问题讨论】：

考虑尝试canvg 吗？看到这个答案：stackoverflow.com/questions/3975499/…

标签： javascript jquery svg html2canvas

【解决方案1】：

如果您想将图像从画布保存为某种图像格式，这里对您有一些帮助。希望对您有所帮助。

$(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”的代码并将其保存在您的根目录中。

<?php
    # we are a PNG image
    header('Content-type: image/png');

    # we are an attachment (eg download), and we have a name
    header('Content-Disposition: attachment; filename="' . $_POST['name'] .'"');

    #capture, replace any spaces w/ plusses, and decode
    $encoded = $_POST['imgdata'];
    $encoded = str_replace(' ', '+', $encoded);
    $decoded = base64_decode($encoded);

    #write decoded data
    echo $decoded;
?>

【讨论】：

【解决方案2】：

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

【讨论】：