how to save svg image as pdf and png?

Question

i have used google chart library for drawing the different google charts.And after draw the chart i have downloaded the svg file as pdf and png. but in word tree chart scenario i cannot downloaded the pdf and png formate. Here is the link for chart:

Word Tree chart

drawCanvas = function (dataURI) {
    $(".download-buttons").css({ 'visibility': 'visible' });

   // imageURI = dataURI;
   var img = new Image();
   img.src = dataURI;
   img.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.clearRect(0, 0, canvas.width, canvas.height);
    canvas.height = img.height;

    canvas.width = img.width;


    context.drawImage(img, 0, 0);
};

i have used this method for downloading the images. this code convert svg format to pdf and png file format in google chart such as Pie chart and other google charts,but using this code i cannot convert the wordtree chart svg file to png and pdf.

Why word tree chart is not being saved as png or pdf while other google charts are being saved successfully? Or What is an alternative way to save svg image as png and pdf.

Answer 1

html2canvas will work on google's word tree...

make sure to include both,
html2canvas.js
html2canvas.svg.js

see following snippet...

 google.charts.load('current', { packages:['wordtree'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Phrases'], ['cats are better than dogs'], ['cats eat kibble'], ['cats are better than hamsters'], ['cats are awesome'], ['cats are people too'], ['cats eat mice'], ['cats meowing'], ['cats in the cradle'], ['cats eat mice'], ['cats in the cradle lyrics'], ['cats eat kibble'], ['cats for adoption'], ['cats are family'], ['cats eat mice'], ['cats are better than kittens'], ['cats are evil'], ['cats are weird'], ['cats eat mice'], ]); var options = { wordtree: { format: 'implicit', word: 'cats' } }; var chartContainer = document.getElementById('chart-container'); var chart = new google.visualization.WordTree(chartContainer); google.visualization.events.addListener(chart, 'ready', function () { var browserIsIE; var domURL; var downloadLink; var fileName; var image; var imageContainer; var imageURL; var svgParent; browserIsIE = false || !!document.documentMode; fileName = 'WordTree.png'; svgParent = chartContainer.getElementsByTagName('svg')[0]; svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { chartContainer = chartContainer.cloneNode(true); domURL = window.URL || window.webkitURL || window; imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'})); image = new Image(); image.src = imageURL; $(chartContainer).find('svg').replaceWith(image); imageContainer = $('#image-container').get(0); $(imageContainer).append(chartContainer); } html2canvas(chartContainer, { allowTaint: true, taintTest: false }).then(function(canvas) { if (browserIsIE) { window.navigator.msSaveBlob(canvas.msToBlob(), fileName); } else { downloadLink = document.createElement('a'); downloadLink.href = canvas.toDataURL('image/png'); downloadLink.download = fileName; raiseEvent(downloadLink, 'click'); } if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { domURL.revokeObjectURL(imageURL); imageContainer.removeChild(chartContainer); } }); }); chart.draw(data, options); function raiseEvent(element, eventType) { var eventRaised; if (document.createEvent) { eventRaised = document.createEvent('MouseEvents'); eventRaised.initEvent(eventType, true, false); element.dispatchEvent(eventRaised); } else if (document.createEventObject) { eventRaised = document.createEventObject(); element.fireEvent('on' + eventType, eventRaised); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart-container"></div> <div id="image-container"></div> 

note: the download doesn't popup when running the snippet here on SO,
check this fiddle to see it in action...