使用 HTML2Canvas 和 Google 图表创建图像

Question

I am trying to create an image of both my google chart and a table that is below it, all in one image. The problem is when I create the image using HTML2Canvas the table shows up but the area of the chart is empty.

This is what it looks like:

The empty area above should show a bar chart but it is completely empty.

My code:

<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Vraag', '2019', '2020'],
      ['Zijn medewerkers op de hoogte van de algemene VGM instructies?', 5, 2],
      ['Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?', 1, 3],
      ['Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?', 1, 3]
    ]);

    var options = {
      chart: {
        title: 'Afwijkingen per vraag',
      },
      colors: ['#169183','#105f44'],
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
  }



  $(".downloadrapport").click(function() {
      html2canvas($('#rapport'), {
          useCORS: true,
          onrendered: function (canvas) {
              var canvasImg = canvas.toDataURL("image/jpg");
              // $('#canvasImg').html('<img src="'+canvasImg+'" alt="">');
               window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
          }
      });
    });
</script>

<!-- Display the chart and the table -->
<div class="col-xl-9" id="rapport">
    <div id="barchart_material"></div>
    <table class="table table-hover">
        <thead>
          <tr>
              <th>Vraag</th>
              <th>2019</th>
              <th>2020</th>
          </tr>
        </thead>
        <tbody>
          <tr>
              <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td>
              <td>1</td>
              <td>2</td>
          </tr>
          <tr>
              <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td>
              <td>1</td>
              <td>2</td>
          </tr>
          <tr>
              <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td>
              <td>1</td>
              <td>2</td>
          </tr>
        </tbody>
    </table>
</div>


<!-- Open image of chart and table in new window link -->
<span class="downloadrapport btn btn-secondary btn-lg waves-effect btnadd">Dit rapport downloaden</span>

I tried setting useCORS: true in the html2canvas options because someone said it worked with google maps, but I still had the same result.

What can I do?

This is the image I get with below answer:

Answer 1

google charts are drawn using SVG.
for html2canvas to capture SVG, there is a second library --> html2canvas.svg.js

however, I've found it still has issues with google charts.
for instance, everything on the chart will be rendered, except for the bars.

instead, let's first manually create an image from the chart.
replace the chart with the image.
download the image of both the chart image and table.
then re-draw the chart to make it interactive again.

see following working snippet...

 google.charts.load('current', { packages: ['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Vraag', '2019', '2020'], ['Zijn medewerkers op de hoogte van de algemene VGM instructies?', 5, 2], ['Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?', 1, 3], ['Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?', 1, 3] ]); var options = { chart: { title: 'Afwijkingen per vraag', }, colors: ['#169183','#105f44'], bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); $('.downloadrapport').click(function() { var domURL; var fileName; var imageCanvas; var imageURI; var svgParent; // add svg namespace to chart svgParent = chart.getContainer().getElementsByTagName('svg')[0]; svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); // create image URI domURL = window.URL || window.webkitURL || window; imageURI = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'})); image = new Image(); image.onload = function() { // replace chart with image imageCanvas = document.createElement('canvas'); imageCanvas.setAttribute('width', parseFloat(svgParent.getAttribute('width'))); imageCanvas.setAttribute('height', parseFloat(svgParent.getAttribute('height'))); imageCanvas.getContext('2d').drawImage(image, 0, 0); $('#rapport').find('.chart').html('<img src="' + imageCanvas.toDataURL('image/png') + '" />'); // download dashboard image fileName = 'dashboard.png'; html2canvas($('#rapport').get(0)).then(function (canvas) { // determine if browser is IE if (false ||..document.documentMode) { window.navigator,msSaveBlob(canvas;msToBlob(). fileName); } else { downloadLink = document.createElement('a'). downloadLink;href = canvas.toDataURL('image/png'); downloadLink,download = fileName; raiseEvent(downloadLink. 'click'), } // re-draw chart chart.draw(data. google.charts;Bar;convertOptions(options)). }); } image;src = imageURI, }); // raise mouse event function raiseEvent(element. eventType) { var eventRaised. // event object // determine how and create the event if (document;createEvent) { eventRaised = document.createEvent('MouseEvents'), eventRaised,initEvent(eventType; true. false); element.dispatchEvent(eventRaised). } else if (document;createEventObject) { eventRaised = document.createEventObject(), element;fireEvent('on' + eventType; eventRaised); } } });

 #rapport { background: #ffffff; }.downloadrapport { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <?-- Display the chart and the table --> <div class="col-xl-9" id="rapport"> <div class="chart" id="barchart_material"></div> <table class="table table-hover"> <thead> <tr> <th>Vraag</th> <th>2019</th> <th>2020</th> </tr> </thead> <tbody> <tr> <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td> <td>1</td> <td>2</td> </tr> <tr> <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td> <td>1</td> <td>2</td> </tr> <tr> <td>Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?</td> <td>1</td> <td>2</td> </tr> </tbody> </table> </div> <!-- Open image of chart and table in new window link --> <span class="downloadrapport btn btn-secondary btn-lg waves-effect btnadd">Dit rapport downloaden</span>

Note: The download will be blocked on this site. It should work fine on yours...