使用wkhtmltoimage截图异常求助：截图错误及报错排查

问题详情 #

调用wkhtmltoimage对https://appmedia.jp/fategrandorder截图时，生成的图片显示异常，执行命令后返回如下错误信息：

Loading page (1/2)
Warning: Failed to load https://appmedia.jp/wp-content/themes/appmedia/lib/fategrandorder/images/img/fgo_checker_bg0.jpg (ignore)
Rendering (2/2)
Warning: Received createRequest signal on a disposed ResourceObject's NetworkAccessManager. This might be an indication of an iframe taking too long to load.
Done
Error: Failed to load about:blank, with network status code 301 and http status code 0 - Protocol "about" is unknown

使用的PHP代码：

<?php

//生成目标链接网页截图的函数
function screenshot($url){

    // 需截图的网页URL
    $url = 'https://appmedia.jp/fategrandorder';

    // 截图保存路径
    $outputImagePath = 'C:/Users/uc100/Programing/xampp/htdocs/codingspace/extention1/screenshot.png';

    // 拼接wkhtmltoimage命令
    $command = "C:/Users/uc100/Programing/wkhtmltopdf/bin/wkhtmltoimage \"$url\" \"$outputImagePath\"";

    // 执行命令
    exec($command, $output, $returnCode);

    if ($returnCode === 0) {
        echo "截图已保存。";
    } else {
        echo "错误";
    }

}

?>

排查与解决方法 #

1. 修复函数参数无效问题 #

函数定义了$url参数，但内部直接硬编码覆盖了参数值，导致外部传入的URL无法生效，先修正这个逻辑：

function screenshot($url){
    // 移除内部硬编码的$url赋值，保留传入的参数
    $outputImagePath = 'C:/Users/uc100/Programing/xampp/htdocs/codingspace/extention1/screenshot.png';
    $command = "C:/Users/uc100/Programing/wkhtmltopdf/bin/wkhtmltoimage \"$url\" \"$outputImagePath\"";
    // 后续执行逻辑保持不变
}

2. 解决about:blank协议错误 #

错误提示的Protocol "about" is unknown是wkhtmltoimage旧版本的已知bug，直接升级到最新版的wkhtmltopdf/wkhtmltoimage即可解决。

3. 优化资源加载与渲染配置 #

针对警告里的资源加载失败、iframe超时问题，给命令添加以下参数优化：

• --load-error-handling ignore：忽略单个资源加载失败的情况
• --timeout 60000：将超时时间延长到60秒，给页面足够的加载时间
• --wait-for-network-idle 5000：等待网络空闲5秒后再截图，确保页面渲染完成

修改后的命令：

C:/Users/uc100/Programing/wkhtmltopdf/bin/wkhtmltoimage --load-error-handling ignore --timeout 60000 --wait-for-network-idle 5000 "https://appmedia.jp/fategrandorder" "C:/Users/uc100/Programing/xampp/htdocs/codingspace/extention1/screenshot.png"

对应PHP代码里的命令部分改为：

$command = "C:/Users/uc100/Programing/wkhtmltopdf/bin/wkhtmltoimage --load-error-handling ignore --timeout 60000 --wait-for-network-idle 5000 \"$url\" \"$outputImagePath\"";

4. 检查路径权限 #

确认$outputImagePath对应的目录有写入权限，避免因权限不足导致图片保存异常。

验证步骤 #

1. 先直接在命令行执行修改后的wkhtmltoimage命令，排查是否是PHP执行环境的问题
2. 修正PHP函数参数后，调用函数测试
3. 如果仍有异常，换用https://example.com这类简单页面测试，确认是目标网站兼容性问题还是工具本身的问题

内容的提问来源于stack exchange，提问作者yushi