Question

我正在尝试使用PhantomJS捕获各种SVG / HTML文档的屏幕截图。我遇到的问题是屏幕截图没有捕获SVG的元素。

这是具有无法正常工作的SVG代码的HTML。请注意，SVG的文本元素正在显示。在这个文档中，元素为框提供了蓝色边框，这些是屏幕截图中没有显示的内容。 https://pastebin.com/EdQQdUkD

以下是我认为有问题的代码：

<rect stroke-dasharray="0" stroke-width="2" ry="2" rx="2" height="60" width="100" stroke="#077bbe" fill="transparent" id="v-36"></rect>

以下是在Mac OSX上使用Chrome浏览器，Firefox或Safari浏览器进行渲染时SVG的外观截图：http://imgur.com/a/6oIWn

以下是PhantomJS在屏幕截图中生成的屏幕截图：http://imgur.com/a/a79ke

这是我用来捕捉屏幕截图的PhantomJS代码：

var page = require('webpage').create(),
system = require('system'),
url, output, width, height;

page.onResourceReceived = function(response) {
    valid = [200, 201, 301, 302]
    if(response.id == 1 && valid.indexOf(response.status) == -1 ){
        console.log('Received a non-200 OK response, got: ', response.status);
        phantom.exit(1);
    }
}

address = system.args[1];
output = system.args[2];
width = system.args[3];
height = system.args[4];
timeout = system.args[5];

console.log("Args: ", system.args);
console.log("Screenshotting: ", address, ", to: ", output);

page.viewportSize = { width: parseInt(width), height: parseInt(height) };
console.log("Viewport: ", JSON.stringify(page.viewportSize));

page.open(address, function (status) {
  if (status !== 'success') {
    console.log('Unable to load the address!');
    phantom.exit();
  } else {
    // Scroll to bottom of page, so all resources are triggered for downloading
    window.setInterval(function() {
      page.evaluate(function() {
        console.log('scrolling', window.document.body.scrollTop);
        window.document.body.scrollTop = window.document.body.scrollTop + 1024;
      });
    }, 255);

    // scroll back to top for consistency, right in time (sometimes)
    // logo's dissapear when scrolling down
    window.setTimeout(function() {
      page.evaluate(function() {
        window.document.body.scrollTop = 0;
      });
    }, timeout - 5);

    // after the timeout, save the screenbuffer to file
    window.setTimeout(function() {
      page.render(output);
      phantom.exit();
    }, timeout);
  }
});

我在PhantomJS版本1.8,1.9,2.0,2.1上尝试了这个，但仍然存在同样的问题。

PhantomJS没有在截图上捕获<rect> SVG元素

0 个答案: