Capybara
poltergeist

Capybara + Poltergeistで画像を保存する

概要

  • Screenshot ではなく img タグの画像を保存します
  • Capybara + Poltergeist で画像のソースURLに visit して body を取得しても、画像表示用のURLが展開されていて、画像データを取得できないようです
  • そもそも Capybara + Poltergeist で画像を保存する必要があるのかは謎

前提

  • 対象画像の img タグを特定できている(idなど)
  • 対象画像のフォーマット(png や jpeg) も特定できている
  • jQueryは使ってないです(使ってももちろんできます)

やり方

何をやっているのか

  • JavaScript を使って、img タグで表示されている画像を canvas に書き出し、canvas#toDataURLを使ってBase64化した画像データを取得
  • Ruby側でBase64データをデコードして生画像データを取得し保存する

コード

JS_CODE = <<-JS
  (function() {
    var image_element = document.getElementById("%s");

    var canvas = document.createElement('canvas');
    canvas.width  = image_element.width;
    canvas.height = image_element.height;
    canvas.getContext('2d').drawImage(image_element, 0, 0);

    var type = "%s";
    var dataURL = canvas.toDataURL(type);
    canvas = null;

    return dataURL;
  })()
JS

visit(url)
dataURL = page.evaluate_script(JS_CODE % ["image_id", "image/png"])
image_data = Base64.decode64(dataURL.gsub(/^.*,/,""))

file = File.open("image.png")
file.write(image_data)
file.close

  • Poltergeist の execute_script は値を返さないので evaluate_script 使ってます
  • evaluate_script は 引数とれないみたいなので 書式付き文字列で値を展開してます

参考