Question

我正在尝试使用PhantomJS屏幕捕获HTML文件。

enter image description here

当我使用phantomjs my.js运行此捕获时，PNG具有图块边缘的图块边缘。

有什么办法可以删除所有边距，这样我才能看到图表吗？

var page = require('webpage').create();
page.open('/my/path/my.html', function() {

    page.viewportSize = { width: 700, height: 550 };
    page.clipRect = { top: 0, left: 0, width: 700, height: 550 };
    page.paperSize = { width: 700, height: 550, orientation: 'portrait', margin: '0px' }

    page.render('my.png');

    phantom.exit();
});

这是我的带谷歌图表的html文件。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Answer 1

目前，您的圆环图表为白色background-color，而您网页的body元素具有透明背景：

body {
    background-color: transparent;
    margin: 8px;
}

来源：您的网页。

请注意与body元素相关联的边距。它对应于您在屏幕截图中可以看到的顶部和左侧“瓷砖边距”。
在网络上，图块的边距代表透明度。要解决此问题，您应将background-color设置为white。

将以下内容添加到CSS中：

body {
    background-color: white;
}

或者，在</head>之上，添加以下行：

<style>body { background-color: white; }</style>

Phantom JS消除了屏幕截图的边距

1 个答案: