Как я могу добавить html2canvas на данную веб-страницу, выполнить ее, а затем прочитать ее результаты с помощью Watir?
require 'watir'
b = Watir::Browser.new :firefox
b.goto "google.com"
path = "/path/to/html2canvas.js" # v. 0.5.0-alpha1
h2c_payload = File.read(path)
b.execute_script h2c_payload
h2c_activator = %<
function genScreenshot () {
var canvasImgContentDecoded;
html2canvas(document.body, {
onrendered: function (canvas) {
window.canvasImgContentDecoded = canvas.toDataURL("image/png");
}});
};
genScreenshot();
>.gsub(/\s+/, ' ').strip
b.execute_script h2c_activator
b.execute_script "return window.canvasImgContentDecoded"
=> nil
Выполнение того же JavaScript в консоли приводит к тому, что переменная (в конечном счете) устанавливается, а затем возвращается при вызове. В чем отличие execute_script
?
Проблема заключается в том, что canvasImgContentDecoded проверяется до того, как будет завершена обработка холста. Не будучи программистом на JavaScript, мне легче выполнять ожидание в Ruby/Watir:
result = nil
b.wait_until { result = b.execute_script "return window.canvasImgContentDecoded;" }
p result
#=> "data:image/png;base64,iVBORw0KGgoA..."
Вышеупомянутое устраняет проблему только при использовании Chrome.
У Firefox, похоже, есть другие ограничения и/или ограничения, которые препятствуют работе исходного кода. Следующее работало в Firefox и в Chrome. Обратите внимание, что для этого может потребоваться более новая версия html2canvas:
require 'watir'
b = Watir::Browser.new :firefox
b.goto("google.com")
# Load html2canvas - currently v1.0.0-alpha.9
h2c_payload = %<
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.js';
document.head.appendChild(script);
>.gsub(/\s+/, ' ').strip
b.execute_script(h2c_payload)
# Wait for html2canvas to load
b.wait_while { b.execute_script("return typeof html2canvas === 'undefined'") }
# Generate the canvas
h2c_activator = 'html2canvas(document.body).then(canvas => {window.canvasImgContentDecoded = canvas.toDataURL("image/png");});'
b.execute_script h2c_activator
# Wait for canvas to be created
result = nil
b.wait_until { result = b.execute_script "return window.canvasImgContentDecoded;" }
p result
#=> "data:image/png;base64,iVBORw0KGgoA..."
Watir::Wait::TimeoutError: timed out after 30 seconds, waiting for true condition on #<Watir::Browser:0x..f8ac5dc61862c6c6e url="https://www.google.com/?gws_rd=ssl" title="Google">
. В консоли изображение генерируется за считанные секунды, если не быстрее.