html e Svg to Canvas 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> 

Questo è il mio codice html. Voglio convertirlo su tela.

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

    } 
}); 

Uso il plugin html2canvas per convertirlo in immagine ma non mostra svg. Risolvo convertire tela svg tp ma ora non html2canvas lavoro

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(); 
     } 
    }); 

posso convertire svg di tela, ma non html2canvas funzione lavorativa.

Answer 1

html2canvas non consente di salvare SVG è un problema.
https://github.com/niklasvh/html2canvas/issues/95

Se si desidera salvare un file SVG si un follow altro modo, come per trasformare il vostro SVG in un PNG per esempio

SVG -> tela -> PNG -> tela -> PNG

Answer 2

Poiché html2canvas non accetta elementi svg, è necessario convertire tutti gli elementi svg in canvas prima di chiamare il metodo html2canvas. È possibile utilizzare la libreria canvg per convertire tutto lo svg in tela. È possibile passare l'oggetto jQuery (che ha bisogno di convertire da SVG in tela, può essere anche un elemento padre) al seguente metodo:

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

La soluzione funziona a meraviglia. Dal momento che non sto usando jQuery nella mia applicazione, ho dovuto cambiare un paio di righe in svgCanvas per ottenere gli elementi svg e scorrere attraverso di essi. Il resto delle funzioni ha funzionato senza modifiche. Il mio codice è ...

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

Sarà necessario usare biblioteca canvg per disegnare questo file SVG ad una tela temporanea e quindi rimuovere quella tela, una volta si prende lo screenshot con html2canvas.

Ecco il link per canvg: https://code.google.com/p/canvg/downloads/list

Prova questo:

//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');