有些导航站提交网站后会把网站截图并且在详情页会附带网页截图，例如这个 博客大全：blogwe.com

挺好奇怎么实现的，所以了解到了这两个开源项目：Puppeteer 和 PuPHPeteer

注意：需要安装 NodeJs 8+ 的版本

设置 NodeJs 镜像(如果你是第一次安装 NodeJs)：npm config set registry https://registry.npm.taobao.org --global

安装 Puppeteer：npm i puppeteer

安装 PuPHPeteer：npm install @nesk/puphpeteer

为了方便实现功能和测试，使用了 Laravel 8 进行安装该项目。

安装 PuPHPeteer：composer require nesk/puphpeteer

在 Laravel 8 安装 PuPHPeteer 后，创建一个控制器：php artisan make:controller ImageController

在路由 web.php 中引入(这是 Laravel 8 的新特性)：use App\Http\Controllers\ImageController;

继续在路由写入：Route::get('create_image', [ImageController::class, 'create']);

在控制器引入：use Nesk\Puphpeteer\Puppeteer;

在控制器写入 create 方法后访问测试：public function create()

{

$puppeteer = new Puppeteer;

$browser = $puppeteer->launch();

$page = $browser->newPage();

$page->goto('https://www.bubaijun.com');

$page->screenshot(['path' => 'example.png']);

$browser->close();

}

此时访问的页面是空白的，因为没有 return ，打开 public 目录可以看到有一个 example.png 文件，该文件如下：

可以看到图片尺寸有点小，可以将 create 方法改成这样：public function create()

{

$puppeteer = new Puppeteer;

$browser = $puppeteer->launch();

$page = $browser->newPage();

$page->setViewport(['width' => 1920, 'height' => 1440]);

$page->goto('https://www.bubaijun.com');

$page->screenshot(['path' => 'example.png']);

$browser->close();

}

也就是在 newPage 方法后可以调用 setViewport 方法进行设置页面大小。

具体的相关文档：https://github.com/puppeteer/puppeteer/blob/main/README.md#usage

https://github.com/puppeteer/puppeteer/blob/v5.4.0/docs/api.md#pagesetviewportviewport

以上文档是 NodeJs 的，需要看懂后稍微修改在 PHP 进行调用。

最后说一下，截图所需的时间受影响的因素很多，所以最好放入队列运行。

截图的图片文件还挺大的，截图了一下 1920 * 1440 现在这个博客首页，图片文件是 916K. 可以适当使用一下压缩，博主用工具压缩后只有 344K.

截出来的图：