javascript - 如何将屏幕截图捕获的路径返回到函数并通过 JSON 返回到 javascript？

Question

我有一个 PHP 脚本，它通过 exec 函数调用 casperjs 脚本，并且工作正常。

是否可以通过 exec 以 JSON 形式返回我保存屏幕截图的路径？

我的脚本如下:

PHP 代码:

// Execute to CasperJS via asynchronous process
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$target = $_POST['target'];
$filename = $_POST['file'];
$retorno = array()

try {
    exec("{$casperjs_run} {$script} {$username} {$password} {$filename} 2>&1", $output);
} catch (Exception $e) {
    $retorno['error404'] = "Desculpe! Não foi possivel acessar a página solicitada.";
}
// Return Data if success
// Retorna para front-end
if (empty($output)){
    $retorno['success'] = $output;
    echo json_encode($retorno);
    return false;
} else {
    $retorno['error'] = $output;
    echo json_encode($retorno);
    return false;
}
?>

CasperJS 代码:

casper.thenOpen(minhaoi, function myaccount() {
    this.capture('pic2.png');
    this.log('Acessando informações da conta, aguarde...');
    if (!this.exists(('div.panel-horizontal'))) {
        this.log(JSON.stringify("Não foi encontrado um plano colaborador, aguarde..."));
        noDetails = this.captureSelector(filename + '.png', 'div.panel-horizontal', {quality: 100});
    } else {
        casper.waitForResource("Análise de Conta", function orderDetails(details) {
            return details;
        }, function onReceive() {
            this.log('ScreenShot Begin');
            myDetails = this.captureSelector(path_images + filename + '.png', '#content', { quality: 100 } );
            this.log(' ScreenShot Done'); });
        });
     }
});

// Logout & Exit
casper.eachThen(oi_out, function () {
    this.capture('pic3.png');
    if (noDetails != "") {
        return noDetails; 
    } else {
        return myDetails;
}).run();

这是我的 JS 代码，它通过 JSON 从 casperjs 接收信息。

Javascript代码:

success: function(data) {
    if (data.success) {
        $('#retorno').html(data.success);
        $('#imagem').attr('src', '/details/' + filename);
        $('#resultado').show(); 
    }
},
error: function(data) {
    // check error
    $('#retorno').attr("class='alert alert-danger' role='alert'");
    $('#retorno').html(data.error);    
}

在我看来，文件名应该是屏幕截图的全名，如下所示，pi9rxw2fqlh.png 加上完整路径。并在浏览器中显示图像。

我的方法有什么问题吗？

Answer 1

对于this.log要实际打印某些内容，您需要将 logLevel 设置为至少 debug因为它是默认的日志级别。因此要么增加日志级别 casper.options.logLevel = 'debug';或使用this.echo而不是this.log .

<小时/>

您似乎正在使用 waitForResource 错误的。由于资源中不能包含空格，因此您可能需要 checkout waitForText 假设加载的资源将该字符串添加到 DOM:

casper.waitForText("Análise de Conta", function onReceive() {
    this.log('ScreenShot Begin');
    myDetails = this.captureSelector(path_images + filename + '.png', '#content', { quality: 100 } );
    this.log(' ScreenShot Done'); });
});

<小时/>

capture以及 captureSelector返回casper实例而不是图像细节。所以你需要传递文件名。

既然你使用了php的exec使用输出数组，您可以 casper.echo具有唯一开头字符串的相关文件名(此处 #noDetails# ):

this.captureSelector(filename + '.png', 'div.panel-horizontal', {quality: 100});
this.echo("#noDetails#" + filename + ".png");

在客户端 JavaScript 中，您可以迭代 data.success或data.error数组并从匹配行中提取文件名:

data.success.forEach(function(line){
    if (line.indexOf("#noDetails#") === 0) {
        var filename = line.split("#noDetails#")[1];
        $('#imagem').attr('src', '/details/' + filename);
    }
});

这样，您就可以从 eachThen 中完全删除 if block 。回调。

<小时/>

另一个选项是设置特定的屏幕截图变量并在最后一行写入 JSON 对象。

this.captureSelector(filename + '.png', 'div.panel-horizontal', {quality: 100});
noDetails = filename + ".png";

最后:

casper.eachThen(oi_out, function () {
    this.capture('pic3.png');
    if (noDetails != "") {
        this.echo(JSON.stringify({filename:noDetails}));
    } else {
        this.echo(JSON.stringify({filename:myDetails}));
    }
});

在客户端，您只需查看数组的最后一行:

var obj = JSON.parse(data.success[data.success.length-1]);
$('#imagem').attr('src', '/details/' + obj.filename);