2013-09-26 30 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')