Render page element with padding in Poltergeist

Question

I would like take screenshot of element with page context, let say 10px around element.

In PhantomJs I would do it

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

I did not find clipRect in Poltergeist.

Is it possible to use phantom.clipRect?

Thanks

score 0 · Answer 1 · answered Sep 26 '13 at 16:48

I found workaround, to make screenshot of element with 10px around element.

I add dynamically new DOM element 'wrap' and put it around target.

Then I take screenshot of wrap. It work!

Code:

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

Render page element with padding in Poltergeist

1 Answers1