Converting HTML Code to Image File

Question

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 ?

Dima Tisnek · Accepted Answer · 2015-12-10 12:34:10Z

3

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.

answered Dec 10, 2015 at 12:34

Dima Tisnek

11.9k4 gold badges73 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting HTML Code to Image File

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related