phantomjs插件---实现通过链接生成网页截图

Phantomjs | PhantomJS


  • 配置要求

    windows下,安装完成phantomJS
    设置phantomjs环境变量【也可直接使用phantomjs目录下的执行文件】
    直接通过访问php文件执行/通过cmd命令行执行【phantomjs phantom_script.js】

    linux下,安装完成phantomJS
    设置phantomjs环境变量
    直接命令行执行phantom_script.js即可【phantomjs phantom_script.js】

  • phantom.php

php 复制代码
<?php
// 引入并执行 PhantomJS 脚本
$phantomScript = './phantom_script.js';
$command = 'phantomjs ' . $phantomScript;
$output = shell_exec($command);

echo 'Screenshot saved at: ' . trim($output);
  • phantom_script.js
javascript 复制代码
var page = require('webpage').create();
page.viewportSize = { width: 900, height: 600 };

var url = 'https://www.kancloud.cn/manual/thinkphp6_0/1037479';  // 替换为您的URL

var timestamp = new Date().getTime();
var savePath = './phantomimg/'+timestamp+'.png';  // 保存截图的路径

function takeScreenshot() {
    page.open(url, function(status) {
        if (status === 'success') {
            // 在页面加载完成后,等待一段时间以确保动态数据(如echarts 图表)渲染完全
            setTimeout(function() {
                page.render(savePath);
                console.log(savePath);
                phantom.exit();
            }, 2000);  // 设置等待时间,单位为毫秒(根据网页数据加载时间参考等待时间)
        } else {
            console.log('Unable to load the page.');
            phantom.exit();
        }
    });
}

takeScreenshot()
相关推荐
Alan_Wdd4 天前
解决谷歌人机验证 (reCAPTCHA) 无法加载问题
前端·chrome·浏览器·插件·人机验证·recaptcha
哆啦 AI 梦8 天前
【Maven】生命周期和插件详解
maven·生命周期·插件·插件目标
哆啦 AI 梦8 天前
【Maven】自定义Maven插件
maven·插件·插件开发
小小工匠15 天前
Plugin - 插件开发03_Spring Boot动态插件化与热加载
spring boot·插件
程序设计实验室19 天前
一个有趣的插件,让写代码变成打怪升级的游戏
插件
ShihanW22 天前
geocodeCN:一个批量将地址转为地理坐标的插件
gis·qgis·插件·地理编码
zhangdabai124 天前
一款适用于教育行业的免费word插件
word·wps·插件·教育行业·教师备课
狮子座的男孩1 个月前
VSCode 使用教程:项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的,都在这里)
经验分享·vscode·编辑器·配置·插件·live server·问题解决方案
吴边落木1 个月前
如何滚动截屏长图?手把手教你
插件
Amd7941 个月前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子