Question

我正在使用PhantomJS 2.1.1 能够抓取网页并生成屏幕截图。

它正在工作......但是我想在将页面渲染成png之前做一些DOM操作（在javascript中）。

我正在做的是（总结几步）：

page.open(http://my_url.htm), function(status) {
  if (status === 'sucess') {
    waitFor(isPageLoaded, grabPage, 30000); //waitFor function is one provided by PhantomJS in example
  }
};

function grabPage() {
  page.render('screenshot_raw.png'); //this is working well

  page.evaluate(function() {
    document.querySelector('[id^="boardBackgroundImg-"]').style.filter = 'invert(1)';
  }

  page.render('screenshot_remodel.png'); //same screenshot as before

  phantom.exit();   
}

当我在firefox consol中做自己的时候：

document.querySelector('[id^="boardBackgroundImg-"]').style.filter = 'invert(1)';

它正在努力工作！

但是进入我的phantomjs脚本......它什么也没做（但没有错误）。我已经尝试将它放在外部js文件中并使用injectJS（）或includeJS（），但它没有帮助。

有人有想法吗？

显然我想做一些DOM转换（删除一些节点）。

问候。

更新

我已在最后更新了我的代码：

fs.write("test.htm", page.content, 'w');
phantom.exit()

文件内容不包含我提供的DOM更改。所以看起来page.evaluate（...）是readonly。就在这里从页面内容中获取数据。

有没有办法在PhantomJS中渲染页面之前修改DOM？

此致

Answer 1

PhantomJS v2.1.1的Webkit渲染引擎现在相当陈旧，它并不完全支持现代CSS或Javascript。如果可以，请尝试使用puppeteer。

PhantomJS：在渲染页面之前修改dom

1 个答案: