使用紅寶石視網膜質量的全屏幕截圖

我的理想目標是能夠截圖

搶特定CSS元素
抓住元素的全高（即使不是頁面的高度更長）
等待載到滿載
快速

第一次嘗試任何資產（使用塞萊nium-webdriver的安裝chromedriver）

的Gemfile

gem 'selenium-webdriver'

App.rb

require 'selenium-webdriver' 
driver = Selenium::WebDriver.for :chrome 
driver.get url 
driver.save_screenshot("screenshot.png")

此作品在一定程度上，但截圖被調整到最大高度（它看起來像一個與Chromedriver很老的問題https://code.google.com/p/chromedriver/issues/detail?id=294）

第二次嘗試（使用poltergeist切換到phantomjs代替）

的Gemfile

gem 'capybara' 
gem 'poltergeist'

App.rb

require "capybara/dsl" 
require "capybara/poltergeist" 
Capybara.run_server = false 
Capybara.register_driver :poltergeist do |app| 
    Capybara::Poltergeist::Driver.new(app, { 
    # Raise JavaScript errors to Ruby 
    js_errors: true, 
    # Additional command line options for PhantomJS 
    phantomjs_options: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'], 
    }) 
end 
Capybara.current_driver = :poltergeist 

class Screenshot 
    include Capybara::DSL 

    # Captures a screenshot of +url+ saving it to +path+. 
    def capture(url, path) 
    # Open page 
    visit url 

    if page.driver.status_code == 200 
     page.driver.save_screenshot(path, :full => true) 
     puts "screenshot saved" 
    else 
     # Handle error 
     puts "there was a problem #{page.driver.status_code}" 
    end 
    end 
end 

screenshot = Screenshot.new 
screenshot.capture url, "screenshot.png"

這有不同的問題，

它抓住了頁面
網絡字體不是全長嵌入（https://github.com/ariya/phantomjs/issues/12132）
視網膜不可用（https://github.com/ariya/phantomjs/issues/10964）

第三次嘗試（使用水豚嘗試利用page.save_screenshot的（路徑，：滿=>真））

的Gemfile

gem 'selenium-webdriver' 
gem 'capybara'

App.rb

require 'selenium-webdriver' 
require "capybara/dsl" 

Capybara.register_driver :chrome do |app| 
    Capybara::Selenium::Driver.new(app, :browser => :chrome) 
end 

Capybara.current_driver = :chrome 

class Screenshot 
    include Capybara::DSL 

    # Captures a screenshot of +url+ saving it to +path+. 
    def capture(url, path) 
    # Open page 
    visit url 

    page.save_screenshot(path, :full => true) 
    puts "screenshot saved" 

    end 
end 

screenshot = Screenshot.new 
screenshot.capture url, "screenshot.png"

短版 - 這不利於

第四次嘗試（使用的Watir）

的Gemfile

gem 'watir-webdriver'

應用。RB

require 'watir-webdriver' 
b = Watir::Browser.new 
b.goto url 
b.screenshot.save 'screenshot.png'

此作品（啓動火狐），但有超過DevicePixelRatio同樣的問題，爲採取視網膜屏幕截圖的功能。

第五次嘗試（回使用Chrome）

App.rb

require 'watir-webdriver' 
b = Watir::Browser.new :chrome 
b.goto url 
b.screenshot.save './tmp/watir.png'

直接回到裁剪頁面的問題。

理想我認爲有可能是的方式來實現這一目標採用了最新的V2.12 ChromeDriver的移動仿真選項

指定單個設備屬性

也可以通過指定個別屬性啓用移動仿真。要以這種方式啓用移動仿真，「mobileEmulation」字典可以包含「deviceMetrics」字典和「userAgent」字符串。以下設備指標必須爲「deviceMetrics」字典中指定的：「寬度」 - 設備屏幕像素高度「高度」 - 設備屏幕「像素比率」的高度（以像素爲單位） - 設備的像素比率

https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation

但沒有設法得到它的工作。

任何建議將非常感謝謝謝！

來源

2014-11-06 Chris

由於這個問題還沒有得到任何人的回答，我想我會概述我用來儘可能接近理想的解決方案。

最終直到這些問題與幻象JS都解決了

似乎能夠保證全高截圖火狐驅動的唯一驅動程序。

雖然它不支持視網膜使用設備像素爲我的目的我能夠使用CSS轉換爲200％的比例和大多數元素（位圖圖像除外）是準確的。

有關在Ruby中視網膜分辨率屏幕捕獲特定推文的工作示例，請參閱此處：https://github.com/chrism/twitter-screenshot

來源

2014-11-24 10:59:59 Chris

使用紅寶石視網膜質量的全屏幕截圖

回答

相關問題