chrome 和 firefox 的不同 canvas 数据 url

Question

我正在制作 google 图表并希望将图表导出为图像，为此我尝试将 div 内容保存为图像。

以下代码在 chrome 中有效，但在 firefox 图表中丢失。（仅 table 图表在 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 和一些文本是粗体天气它在图表中不是粗体或包含 div）。

我想知道是否有任何 google 图表函数可以这样做，或者甚至可以通过这种方式来实现，我正在关注为什么 firefox 具有不同的 url 数据。 TIA.

Answer 1

google 图表有自己的另存为图像的本机方法...

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 的不同 canvas 数据 url

different canvas data url for chrome and firefox

firefox

jquery

google-chrome

google-visualization

html2canvas