poltergeist - 在 Poltergeist 中使用填充渲染页面元素

Question

我想用页面上下文截取元素的屏幕截图，比如说元素周围 10px。

在 PhantomJs 我会这样做

phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 };
phantom.render(output);

我没有clipRect在 Poltergeist 中找到。

可以使用phantom.clipRect吗？

谢谢

Answer 1

我找到了解决方法，以在元素周围制作 10px 的元素屏幕截图。

我动态添加新的 DOM 元素 'wrap' 并将其放在目标周围。

然后我截取包装的屏幕截图。这行得通！

代码：

result_file = File.expand_path('../tmp/screenshot.jpg', __FILE__)

browser.execute_script %Q(
  // add jQuery
  (function(){
    function getScript(src, callback) {
      var fileref = document.createElement('script');
      fileref.setAttribute("type","text/javascript");
      fileref.setAttribute("src", src);
      if (callback) {
        fileref.setAttribute("onload", callback());
      }
      document.getElementsByTagName("head")[0].appendChild(fileref);
    }

    getScript('https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', function(){
      $(function() {
        var target = $('#{screenshot_target_selector}');
        var offset = target.offset();
        var wrap = $('<div id="inlinemanual_screenshot_target_selector_wrap"></div>').prependTo('body');
        wrap.css({
          position: 'absolute', 
          width: target.outerWidth() + 20, 
          height: target.outerHeight() + 20,
          top: offset.top - 10, 
          left: offset.left - 10
        });
      });
    });
  }())
)

browser.screenshot_element(result_file, '#inlinemanual_screenshot_target_selector_wrap')