Search code examples
jquerygoogle-chromefirefoxgoogle-visualizationhtml2canvas

different canvas data url for chrome and firefox

I am working on google charts and want to export chart as an image, to achieve this I am trying to save div content as an image.

Below code is working in chrome but in firefox chart is missing.(only table chart is showing in firefox).

The chart is drawn on Div with id=Graph1.

The difference in images on both browsers is due to different data url values of canvas(base64 value is differ in both browsers).

Html:-

 <div class="col-lg-6 col-sm-6 col-xs-12 full drag-boxx">
        <div class="infographic-box" id="infographic-box">
            <div class="row">
                <div class="col-sm-9 col-xs-9">
                    <h5 class="infographic-box-heading">Gross Profit & Margin <span>by quarter</span></h5>
                    <h4 class="greentxt">$ 1,214.5 M</h4>
                </div>
                <div class="col-sm-3 col-xs-3 text-right"> <img src="/content/images/resize-icon.png" class="resize-icon" /> <img src="/content/images/drag-icon.png" /> </div>
            </div>
            <div class="graph-sec">
                <div id="Graph1">
                </div>
            </div>
            <div class="infographi-details">
                <div class="profile-icon"> <img src="/content/images/dashboard-profile-icon.png"/ class="pull-left"></div>
                <div class="text-center profile-details"> <span> <img src="/content/images/dashboard-eye-icon.png" />8</span> <span> <img src="/content/images/dashboard-chat-icon.png" />8</span> </div>
                <div class="star-icon"><img src="/content/images/dashbaord-star-icon.png"/ class="pull-right"></div>
            </div>
        </div>
    </div>
  <a id="export2" href="#"></a>
  <a id="export" href="javascript:void(0)" onclick="return ConvertToImage(this);"></a>

jQuery:-

var base64;
    function downloadCanvas(link) {           
        link.href = base64;
        link.download = $('.infographic-box-heading').text();          
    }    

    document.getElementById('export2').addEventListener('click', function () {
        downloadCanvas(this);
    }, false);

    function ConvertToImage(btnExport) {       
        html2canvas($("#infographic-box")[0]).then(function (canvas) {
            base64 = canvas.toDataURL();                
            document.getElementById('export2').click();
        });
        return false;
    }

Actual chart:-

enter image description here

Chart image on chrome:-

enter image description here

Chart image on firefox:-

enter image description here

Even there is some blur text on image from chrome(arround PackageAmount and some where text is in bold weather its not bold in chart or containg div).

I want to know is there any google chart function to do so or even by doing this way which I am following why firefox has different url data. TIA.

Solution

  • google charts have their own native method for saving as image... 

    getImageURI

    just need to wait for the chart's ready event to fire before using

    see following working snippet... 

    google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2015');
    data.addColumn('number', '2016');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('02/01/2016'), 190, 220],
       [new Date('03/01/2016'), 205, 200],
       [new Date('04/01/2016'), 220, 230],
       [new Date('05/01/2016'), 212, 210],
       [new Date('06/01/2016'), 185, 193],
       [new Date('07/01/2016'), 196, 207]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
    });

    chart.draw(data, {
      hAxis: {
        format: 'MMM'
      },
      height: 400
    });
  },
  packages: ['corechart']
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="image_div"></div>