chrome和firefox的不同画布数据url

Question

我正在研究谷歌图表并希望将图表导出为图像，为此我正在尝试将 div 内容保存为图像。

下面的代码在 chrome 中运行，但在 Firefox 中缺少图表。（只有表格图表在 Firefox 中显示）。

图表是在 id=Graph1 的 Div 上绘制的。

两种浏览器图片的差异是由于canvas的data 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，有些文本是粗体的，它在图表中不粗体或包含 div）。

我想知道是否有任何谷歌图表功能可以这样做，或者甚至通过这样做，我正在关注为什么 firefox 有不同的 url 数据。 TIA。

Answer 1

谷歌图表有自己的保存为图像的本地方法......

getImageURI  

只需要等待图表的就绪事件触发即可使用

---

请参阅以下工作 sn-p...

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>