TYPECHO WIKI

PHP+NodeJs后端给网站截图

Typecho维基君资源分享 • 226次浏览 • 发布 2022-07-14 • 更新 2022-07-14
极致加速的V2Ray 助您畅享全球网络

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

挺好奇怎么实现的,所以了解到了这两个开源项目:PuppeteerPuPHPeteer

注意:需要安装 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 文件,该文件如下:

1.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.

截出来的图:

2.png

厂商投放

【腾讯云】爆款2核2G云服务器首年40元 企业首购最高获赠300元京东卡

腾讯云新春采购节,云服务器多种机型限时抢购,2核2G首年40元,4核8G首年211元,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

广告
添加新评论 »