html2canvas.js無法捕獲動態生成內容的圖像

Question

我正在使用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元素，但在渲染圖形后顯示了svg，但快照不包含節點和邊。

html2canvas是否有替代方法，還是可以解決此問題？

Answer 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;
?>

Answer 2

您可能使用lib的beta版本，goto在html2canvas的github頁面上發布並下載穩定的alpha版本