javascript - getBoundingClientRect()导致JavaScript崩溃？

所以我试图在phantom.js中使用以下代码从页面上抓取验证码图像

if(page.content.search('captcha') != -1){
    console.log('taking a picture')
    var clipRect = document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
    console.log('got bounds')
    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('capture.png');
  }

如您所见，它非常简单。获取元素，获取元素边界的剪辑，然后截取渲染的屏幕截图。

现在当我执行

document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect()

在谷歌浏览器控制台中，它返回此值。

ClientRect {top: 430, right: 621, bottom: 500, left: 421, width: 200…}

但是，在我的JavaScript代码中，似乎正在产生某种我无法捕获的错误。当我删除后缀“.getBoundingClientRect()”时，代码开始工作。 (显然，我必须在clipRect维度中添加虚拟值)。

我不太了解它是如何崩溃的，以及如何甚至查看崩溃的stacktrace /错误消息。

任何帮助都将是惊人的
谢谢

最佳答案

与目标页面的DOM有关的所有JavaScript都必须在page.evaluate()函数内执行。

var clipRect = page.evaluate(function(){
    return document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
});