Question

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

在PhantomJs中，我会这样做

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

我没有在Poltergeist中找到clipRect。

是否可以使用phantom.clipRect？

由于

Answer 1

我找到了解决方法，用元素10px制作元素截图。

我动态添加了新的DOM元素＆＃39; wrap＆＃39;把它放在目标附近。

然后我拍了一下换行的截图。它有效！

代码：

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')

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

1 个答案: