Элемент страницы рендеринга с заполнением в Полтергейсте

Question

Я хотел бы снять снимок экрана с контекстом страницы, пусть 10px вокруг элемента.

В PhantomJs я хотел бы сделать это

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

я не нашел clipRect в полтергейст.

Можно ли использовать 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')