html und Svg zu Leinwand Javascript

Question

<div id="Contents"> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
<div style="float:left;margin-left:10px;"> 
<svg></svg> 
</div> 
</div> 

Das ist mein HTML-Code. Ich möchte das Leinwandbild konvertieren.

html2canvas($("#Contents"), { 
    onrendered: function(canvas) { 
    window.open(canvas.toDataURL()); 

    } 
}); 

Ich benutze html2canvas Plugin für die Konvertierung in Bild, aber es zeigt nicht Svg. Ich löse Umwandlung Leinwand svg tp aber jetzt html2canvas funktioniert nicht

var $to=$("#MainContents").clone(); 

      $($to).children(".box").each(function() { 
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg(); 
      var Thiscanvas = document.createElement("canvas"); 
      Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;"); 

      canvg(Thiscanvas, svg); 

      $(this).append(Thiscanvas); 

     }); 
     html2canvas($($to), { 
     onrendered: function(canvasq) { 
     var w=window.open(canvasq.toDataURL()); 
     w.print(); 
     } 
    }); 

I SVG Leinwand umwandeln kann aber html2canvas Working-Funktion nicht.

Answer 1

html2canvas kann nicht speichern SVG ist ein Problem.
https://github.com/niklasvh/html2canvas/issues/95

Wenn Sie eine SVG speichern möchten Sie eine andere Art und Weise folgen, wie Ihr SVG in ein PNG zum Beispiel verwandeln

SVG -> Leinwand -> PNG -> Leinwand -> PNG

Answer 2

Da die html2canvas keine svg-Elemente benötigen, müssen Sie alle svg-Elemente in die Zeichenfläche konvertieren, bevor Sie die html2canvas-Methode aufrufen. Sie können die Bibliothek canvg verwenden, um die gesamte SVG in Canvas zu konvertieren. Sie können das Jquery-Objekt übergeben das folgende Verfahren (die von svg auf der Leinwand konvertieren muss, kann auch ein übergeordnetes Element sein):

function svgToCanvas (targetElem) { 
var nodesToRecover = []; 
var nodesToRemove = []; 

var svgElem = targetElem.find('svg'); 

svgElem.each(function(index, node) { 
    var parentNode = node.parentNode; 
    var svg = parentNode.innerHTML; 

    var canvas = document.createElement('canvas'); 

    canvg(canvas, svg); 

    nodesToRecover.push({ 
     parent: parentNode, 
     child: node 
    }); 
    parentNode.removeChild(node); 

    nodesToRemove.push({ 
     parent: parentNode, 
     child: canvas 
    }); 

    parentNode.appendChild(canvas); 
}); 

html2canvas(targetElem, { 
    onrendered: function(canvas) { 
     var ctx = canvas.getContext('2d'); 
     ctx.webkitImageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     ctx.imageSmoothingEnabled = false; 
    } 
}); 

}

Answer 3

Ihre Lösung funktioniert wunderbar. Da ich jQuery in meiner Anwendung nicht verwende, musste ich einige Zeilen in svgCanvas ändern, um die svg-Elemente zu erhalten und sie zu durchlaufen. Der Rest der Funktionen funktionierte ohne Änderungen. Mein Code ist ...

function svgToCanvas (targetElem) { 
     var nodesToRecover = []; 
     var nodesToRemove = []; 

     var svgElems = document.getElementsByTagName("svg"); 

     for (var i=0; i<svgElems.length; i++) { 
      var node = svgElems[i]; 
      var parentNode = node.parentNode; 
      var svg = parentNode.innerHTML; 

      var canvas = document.createElement('canvas'); 

      canvg(canvas, svg); 

      nodesToRecover.push({ 
       parent: parentNode, 
       child: node 
      }); 
      parentNode.removeChild(node); 

      nodesToRemove.push({ 
       parent: parentNode, 
       child: canvas 
      }); 

      parentNode.appendChild(canvas); 
     } 
} 

Answer 4

Sie müssen canvg Bibliothek verwenden für dieses svg in eine temporäre Leinwand zeichnen und dann die Leinwand entfernen, sobald Sie den Screenshot mit html2canvas nehmen. Hier

ist der Link für canvg: https://code.google.com/p/canvg/downloads/list

starten:

//find all svg elements in $container 
//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc 
var svgElements= $container.find('svg'); 

//replace all svgs with a temp canvas 
svgElements.each(function() { 
    var canvas, xml; 

    canvas = document.createElement("canvas"); 
    canvas.className = "screenShotTempCanvas"; 
    //convert SVG into a XML string 
    xml = (new XMLSerializer()).serializeToString(this); 

    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 

    //draw the SVG onto a canvas 
    canvg(canvas, xml); 
    $(canvas).insertAfter(this); 
    //hide the SVG element 
    this.className = "tempHide"; 
    $(this).hide(); 
}); 

//... 
//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT 
//... 

//After your image is generated revert the temporary changes 
$container.find('.screenShotTempCanvas').remove(); 
$container.find('.tempHide').show().removeClass('tempHide');