save svg to image

by cmoreira

HTML

<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://www.google.com/jsapi?fake=.js"></script>
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
      Image will be placed here
    </div>

    <button onclick="saveAsImg(document.getElementById('pie_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('pie_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="pie_div"></div>

    <button onclick="saveAsImg(document.getElementById('line_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="line_div"></div>    
    
    <button onclick="saveAsImg(document.getElementById('treemap_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('treemap_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="treemap_div" style="width: 450px; height: 300px;"></div>

    <button onclick="saveAsImg(document.getElementById('map_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('map_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="map_div" style="width: 500px; height: 300px"></div>
    
    <button onclick="saveAsImg(document.getElementById('scatter_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('scatter_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="scatter_div"></div>

JavaScript

function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);
        
        
        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL('image/png');
        canvas.parentNode.removeChild(canvas);
        return imgData;
      }
      
      function saveAsImg(chartContainer) {
        var imgData = getImgData(chartContainer);
        
        // Replacing the mime-type will force the browser to trigger a download
        // rather than displaying the image in the browser window.
        window.location = imgData.replace('image/png', 'image/octet-stream');
      }
      
      function toImg(chartContainer, imgContainer) { 
        var doc = chartContainer.ownerDocument;
        var img = doc.createElement('img');
        img.src = getImgData(chartContainer);
        
        while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
        }
        imgContainer.appendChild(img);
      }

      google.load('visualization', '1', {packages:['corechart', 'treemap', 'geochart']});

      google.setOnLoadCallback(drawChart);

      function drawChart() {
        // Pie chart
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
       ...