html y Svg a Canvas javascript

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

Este es mi código html Quiero convertirlo en image de canvas.

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

Yo uso el plugin html2canvas para convertirlo a image pero no muestra svg. Resuelvo convertir svg tp canvas pero ahora html2canvas no funciona

  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), { onrendenetworking: function(canvasq) { var w=window.open(canvasq.toDataURL()); w.print(); } }); 

Puedo convertir svg a canvas pero la function html2canvas no funciona.

Tendrá que usar la biblioteca canvg para dibujar esta svg en un canvas temporal y luego quitar ese canvas una vez que tome la captura de pantalla usando html2canvas.

Aquí está el enlace para canvg: https://code.google.com/p/canvg/downloads/list

Prueba esto:

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

Como html2canvas no toma elementos svg, debe convertir todos los elementos svg en canvas antes de llamar al método html2canvas. Puede usar la biblioteca canvg para convertir todos los svg a canvas. Puede pasar el object jquery (que debe convertir de svg a canvas, también puede ser un elemento principal) al siguiente método:

 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, { onrendenetworking: function(canvas) { var ctx = canvas.getContext('2d'); ctx.webkitImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; } }); 

}

Tu solución funciona maravillosamente. Como no estoy usando jQuery en mi aplicación, tuve que cambiar un par de líneas en svgCanvas para get los elementos svg e iterar a través de ellos. El rest de las funciones funcionó sin ningún cambio. Mi código es …

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

html2canvas no permite save SVG es un problema.
https://github.com/niklasvh/html2canvas/issues/95

Si quieres save un SVG, sigue de otra manera, por ejemplo, para transformar tu SVG en PNG, por ejemplo.

SVG -> canvas -> PNG -> canvas -> PNG