2013-09-26 27 views
0

我想使用页面上下文截取元素的屏幕截图,例如说元素周围有10px。在Poltergeist中使用填充渲染页面元素

在PhantomJs我会做

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

我没有发现鬼驱人clipRect

是否可以使用phantom.clipRect

感谢

回答

0

我找到了解决方法,使元素的屏幕截图周围元素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')