Capybara：从加载的页面保存图像（不是截图）

Question

我正在使用红宝石和水豚宝石。我的观点是加载页面，保存图像，然后用它做一些事情。网页地址是相同的，但每次重新加载页面时图像都不同实际上它是验证码。

我正在尝试从该页面保存图像。在这种情况下，使用save_page保存的屏幕截图对我不起作用。

下面请看我使用的代码：

require 'capybara'
requre 'capybara/dsl'
require 'pry'

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

Capybara.run_server = false
Capybara.current_driver = :selenium_chrome
Capybara.app_host = "some-site"

module MyCapybara
  class Crawler
    include Capybara::DSL
  end
end

c = MyCapybara::Crawler.new
c.visit('some-url')

# [21] pry(main)> c.inspect
# => "#<MyCapybara::Crawler:0x007fc999c21d60>"

i = c.find_by_id('captcha').find('img')

# [23] pry(main)> i.inspect
# => "#<Capybara::Node::Element tag=\"img\" path=\"/html/body/div/div[2]/div[1]/div[1]/form/div[1]/img\">"

binding.pry

puts 1

我需要在i中保存“包含”的图像。通过网址使用其他工具获取它将无法正常工作，因为不同的图像每次.../captcha.jpg都有相同的网址。

我不能提供确切的网站和屏幕截图，对不起。

有人可以帮我吗？或者我选择了不适合的工具（我的意思是Capybara），更好的是尝试Mechanize gem？

谢谢！

解

请参阅下面用于保存图像的js：

// captcha_fetcher.js

(function () {
  var form = document.getElementById("appointment_captcha_month");
  var img = form.getElementsByTagName("img")[0];

  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  var dataURL = canvas.toDataURL("image/png");

  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}())

然后通过evaluate_script调用它：

image_base64_encoded = page.evaluate_script(IO.read('captcha_fetcher.js'))

Answer 1

Capybara没有内置的方法，但您可以执行javascript（page.evaluate_script）drawImage（i）到canvas元素，然后使用getImageData从画布获取像素值并写入外部文件。

Answer 2

我遇到了你的问题，并开始按照Thomas Walpole和Igor的建议整理一个javascript解决方案。它似乎很乱，所以我想出了这个：

# Get the image source URL
image_url = find_by_id('captcha').find('img')[:src]

# Open the image in a new window
image_window = session.open_new_window
session.switch_to_window(image_window)

# Take a screenshot of the new image and print it's path
p session.save_screenshot