I have used svg icons in my app & used svg to draw charts too.When I generate image using html2canvas all the svgs are ignored & image is generated without all svgs.
I am using below function to generate image.
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, {
allowTaint: true,
onrendered: function(canvas) {
// var ctx = canvas.getContext('2d');
// ctx.webkitImageSmoothingEnabled = false;
// ctx.mozImageSmoothingEnabled = false;
// ctx.imageSmoothingEnabled = false;
var img_PNG = Canvas2Image.saveAsPNG(canvas);
}
});
}
This function is called like this svgToCanvas($("#app-container"));
Thanks in advance.
I forgot to answer this question.Someone up vote my question so came into mind.
Actually html2canvas is converting to image but it was not picking style of the SVG as it was writtedn in different css file.So if you want to get styles of SVG in image you have to give style inline within tags.Then you will get complete and colorful image.
Hope this will help you.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments