Question

我正在使用谷歌图表，并希望将图表导出为图像，为实现这一点，我试图将div内容保存为图像。

下面的代码在chrome中工作但在firefox图表中缺失。（只有表格图表在firefox中显示）。

图表绘制在Div上，ID = Graph1。

两种浏览器中图像的差异是由于canvas的数据url值不同（base64值在两种浏览器中都不同）。

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;
    }

实际图表： -

Chrome上的图表图片：

firefox上的图表图片： -

即使Chrome上的图像上有一些模糊文本（周围的PackageAmount和一些文本处于粗体天气的图表或图表中没有粗体）。

我想知道是否有任何谷歌图表功能这样做，甚至通过这样做我遵循为什么firefox有不同的网址数据。 TIA。

Answer 1

谷歌图表有自己的原生方法保存为图像...

getImageURI

只需等待图表的就绪事件在使用

之前触发

请参阅以下工作代码段...

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>

chrome和firefox的不同画布数据网址

1 个答案: