クロムとファイアフォンの異なるキャンバスデータURL

Question

私はGoogleのチャートで作業しており、これを達成するためにチャートを画像としてエクスポートしたいと考えています。divコンテンツを画像として保存しようとしています。

以下のコードはChromeで動作していますが、Firefoxチャートでは表示されません（Firefoxのみで表のチャートのみ表示されています）。

グラフはid = Graph1のDivで描画されます。

両方のブラウザの画像の違いは、キャンバスのデータ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; 
    } 

実績図表： -

クロムに

チャート画像： -

Firefoxの上にチャート画像： -

があってもそこクロムから画像上のいくつかのぼかしテキストが（PackageAmount arroundのであり、いくつかのテキストは大胆な天気であり、チャートやcontaing divでは太字ではありません）。

私は知りたいのですが、これを行うにはGoogleのチャート機能がありますか、それともFirefoxのさまざまなURLデータを持っているのか、私はこのようにしています。 TIA。

Answer 1

Googleのチャートは画像として保存するための独自のネイティブメソッドを持っている...

getImageURI 

はただの作業スニペット以下を参照してください

---

を使用する前に発射するチャートのreadyイベントを待つ必要があります。 ..

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>