Anhängen eines div mit Canvas funktioniert nicht

Question

Ich verwende canvg, um Svg in div in canvas konvertieren (bis dahin funktioniert es gut) und dann kopieren Sie die innerHTML von div zu einem anderen div, aber es funktioniert nicht. Leinwand kommt, aber nichts wird in dieser Leinwand vorhanden sein. Dank im Voraus

<div id="k"> 
<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    Sorry, your browser does not support inline SVG. 
</svg> 
</div> 
<div id="kk"> 
<p>Watch me</p> 
</div> 

var svgTag = document.querySelectorAll('#k svg');  
    svgTag = svgTag[0]; 
    var c = document.createElement('canvas'); 
    c.width = svgTag.clientWidth; 
    c.height = svgTag.clientHeight; 
    svgTag.parentNode.insertBefore(c, svgTag); 
    svgTag.parentNode.removeChild(svgTag); 
    var div = document.createElement('div'); 
    div.appendChild(svgTag); 
    canvg(c, div.innerHTML); 

    setTimeout(function(){ 
     var data = $("#k").html(); 
     $("#kk").append($(''+data+'')); 
    },5000); 

JSFiddle

Answer 1

Der Inhalt eines Leinenelement als binäre Daten, ähnlich wie der Inhalt eines Bildelements gehalten. Canvas-Elemente verfügen nicht über eine innerHTML Texteigenschaft, die zum Erstellen der Zeichenfläche verwendet werden kann.

Das folgende Beispiel zeigt ein Verfahren, eine Leinwand Element unter Verwendung von Standardsegeltuch 2D-Klonierverfahren:

function canvasClone(c1) { 
    var c2 = document.createElement('canvas'); 
    c2.width=c1.width; 
    c2.height=c1.height; 
    c2.getContext("2d").drawImage(c1, 0,0); 
    return c2; 
} 

Sie können es nachweisen, indem die Funktion in der Geige und Ändern die Timeout-Verarbeitung:

setTimeout(function(){ 
    kk.appendChild(canvasClone(c)); 
},5000); 

Fühlen Sie sich frei, den Timeout-Code in JQuery neu zu schreiben, wenn Sie bevorzugen.