Html and 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> 

This is my html code. I want to convert a canvas image.

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

I use the html2canvas plugin to convert it to an image, but it does not show svg. I am solving svg tp canvas conversion but now html2canvas is not working

  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 can convert svg to canvas, but the html2canvas function does not work.

Answer 1

You will need to use the canvg library to draw this svg in a temporary canvas, and then delete this canvas as soon as you take a screenshot using html2canvas.

Here is the link to canvg: https://github.com/canvg/canvg

Try it:

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

Answer 2

Since html2canvas does not accept svg elements, you need to convert all svg elements to canvas before you call the html2canvas method. You can use the canvg library to convert all svg to canvas. You can pass a jquery object (which should convert from svg to canvas, can also be a parent) to the following method:

 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

Your solution works beautifully. Since I do not use jQuery in my application, I had to change a couple of lines in svgCanvas to get the svg elements and iterate through them. The rest of the functions worked without any changes. My code ...

 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

html2canvas does not allow to save SVG. https://github.com/niklasvh/html2canvas/issues/95

If you want to save SVG, you follow another way, for example, to convert SVG to PNG, for example

SVG → canvas → PNG → canvas → PNG

Answer 5

You can create your own innerHTML, for example the following (github: https://github.com/yelloxing/clay/blob/master/src/_polyfill/innerHTML.js ): enter a description of the image here