Question

所以我试图在我的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()

在谷歌Chrome控制台中，它会返回此内容。

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

然而，在我的javascript代码中，它似乎产生了一些我无法捕获的错误。当我删除后缀＆＃34; .getBoundingClientRect（）＆＃34;代码开始工作。（显然我必须为clipRect维度添加虚拟值）。

我不太明白它是如何崩溃以及如何查看崩溃的堆栈跟踪/错误消息..

任何帮助都会很棒感谢

Answer 1

任何和所有与目标页面的DOM有关的javascript都必须在page.evaluate（）函数内执行。

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

getBoundingClientRect（）导致javascript崩溃？

1 个答案: