CODEWITHSUNDEEP
pythonhtmlpython-imaging-library
Frederico Martins
Frederico Martins

Reputation: 1101

Converting HTML Code to Image File

I've been searching and the only thing that i can find to convert an HTML image to .jpg, .gif, or any other is by taking screen shots. (or other ways, but always through the output)

What i would like is to make it internal, for example, i have a chart code of a Google chart:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geochart"]});
      google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

So, my question is, is it possible to convert this code to an image using Python ?

Upvotes: 0

Views: 3678

Answers (1)

Dima Tisnek
Dima Tisnek

Reputation: 11781

Possible approaches:

Spawn a Browser, load html, let it render, take a screenshot. You can use a headless browser (https://github.com/brenden/node-webshot) or an almost browser in a headless X server (https://wiki.python.org/moin/PyWebkitGtk), or a real browser.

Use Javascript to do the same (https://html2canvas.hertzen.com/) which still requires your Javascript to run somewhere, whether node.js or command line or headless or real browser.

Ask Google Charts for an image file instead of drawing on canvas (https://developers.google.com/chart/interactive/docs/printing). YMMV, and that depends on what Google offers. You may use some other charting library.

Upvotes: 3

Related Questions