nodejs+koa2+puppeteer在线网站截图服务为hexo博客友链提供网站缩略图


hexo博客的主题fluid友链是不带显示网站截图,小波在博客好友UyoAhz[3]的指引下找到了相关wordpress在线服务插件browser-shots,非常完美实现了wordpress博客才有的友链显示网站缩略图效果,然后也顺便自己基于nodejs+koa2+puppeteer搭建了一个在线网站截图服务,代码已经提交到github仓库。


😍廿壴(ganxb2)博客友链页面最终魔改后成品效果

廿壴(ganxb2)博客友链页面


😚网站截图插件在线服务

使用方法:在线插件统一操作方式都是直接把友链页面的链接增加一个img标签,代码如下

1
2
3
https://urlscan.io/liveshot/?width=宽度&height=高度&url=网址
eg:
<img class="links-picture" src="https://urlscan.io/liveshot/?width=600&height=400&url=https://blog.ganxb2.com/" alt="ganxb2">
1
2
3
https://s0.wp.com/mshots/v1/网址?w=宽度&h=高度
eg:
<img class="links-picture" src="https://s0.wp.com/mshots/v1/https://blog.ganxb2.com/?w=600px&h=400px" alt="ganxb2">

插件源码:browser-shots的github仓库[1]

插件原理解析:browser-shots作者博客[2]

如果要自己手动魔改wordpress博客,您所要做的就是下载 BM Shots 插件,并将其上传到您的插件目录。有关完整详细信息,请查看BM Shots 插件页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
/*
Plugin Name: BM_Shots
Plugin URI: http://wordpress.org/#
Description: A plugin to take advantage of the mshots functionality on WordPress.com
Author: Ben Gillbanks
Version: 0.8
Author URI: https://www.binarymoon.co.uk/
*/

function bm_sc_mshot ($attributes, $content = '', $code = '') {

extract(shortcode_atts(array(
'url' => '',
'width' => 250,
), $attributes));

$imageUrl = bm_mshot ($url, $width);

if ($imageUrl == '') {
return '';
} else {
$image = '<img src="' . $imageUrl . '" alt="' . $url . '" width="' . $width . '"/>';
return '<div class="browsershot mshot"><a href="' . $url . '">' . $image . '</a></div>';
}

}

function bm_mshot ($url = '', $width = 250) {

if ($url != '') {
return 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) . '?w=' . $width;
} else {
return '';
}

}

add_shortcode('browsershot', 'bm_sc_mshot');
?>
1
2
3
https://www.screenshotmaster.com/api/v1/screenshot?url=需要截图的URL&token=您的API token&width=宽度&height=高度
eg:
<img class="links-picture" src="https://www.screenshotmaster.com/api/v1/screenshot?url=https://blog.ganxb2.com/&token=您的API token&width=600&height=400" alt="ganxb2">

友情提示:需要去官网申请API token。


😊扩展阅读:五花八门的技术栈实现网页截图功能

  • dom-to-image

    原理:dom-to-image库主要使用的是SVG实现方式,简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

  • html2canvas

    原理:html2canvas库主要使用的是Canvas实现方式,主要过程是手动将dom重新绘制成canvas,因此,它只能正确渲染可以理解的属性,有许多CSS属性无法正确渲染。其中重点就在于将dom重新绘制成canvas的过程,该过程整体的思路是:遍历目标节点和目标节点的子节点,遍历过程中记录所有节点的结构、内容和样式,然后计算节点本身的层级关系,最后根据不同的优先级绘制到canvas画布中。

    浏览器兼容性:

    Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

    官方文档地址:http://html2canvas.hertzen.com/documentation

    csdn一篇文章:dom-to-image和html2canvas详细介绍

  • phantomJS不推荐

    pageres:捕获各种分辨率的网站屏幕截图。确保您的网站具有响应能力的好方法。它速度很快,可以在一分钟多一点的时间内从 10 个不同的网站生成 100 个屏幕截图。它还可以用于渲染 SVG 图像。依赖于phantomJS

  • puppeteer推荐

    Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。

    为什么推荐Puppeteer?

    2022-12-30_142903

  • selenium

    这个小波没更具体查看,需要了解的可以自行百度下,比较偏后端向

  • python

    pil和pillow

    PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了。PIL功能非常强大,但API却非常简单易用,不过只支持到Python 2.7

    Pillow:是PIL的一个派生分支,但如今已经发展成为比PIL本身更具活力的图像处理库。目前最新版本是3.0.0


😊小波自己搭建的nodejs+koa2+puppeteer在线网站截图服务

因为现在网站截图这个功能利用范畴挺多,包括类似微信上的海报分享功能都有使用网站截图的相关技术栈,所以小波自己也摸索着看看具体相关技术栈的实现。

2022-12-29_223734
2022-12-30_003317
  • 文件目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    koa2_puppeteer
    ├─ .git
    ├─ .gitignore
    ├─ app.js 入口文件
    ├─ package-lock.json
    ├─ package.json
    ├─ public
    │ └─ default.jpg 默认图片
    ├─ README.md
    ├─ router
    │ ├─ home.js 生成图片路由调用接口
    │ └─ index.js 路由入口
    ├─ src
    │ └─ assets 生成图片保存地址
    │ ├─ 1024_768(https_www_baidu_com).jpeg
    │ └─ 1440_900(https_www_baidu_com).jpeg
    ├─ utils
    │ └─ db.js 连接数据库
    └─ views
    └─ getJpeg.js 生成图片核心方法和接口返回数据格式
  • 开始使用

    1. github上clone下源码到本地,执行 npm i 初始项目,并执行 nodemon启动项目
    2. 地址栏输入http://localhost:3000/home?url=https://www.baidu.com&quality=50&sc=1,3即可看到效果

nodejs+koa2+puppeteer参考的相关文章

  1. 基于koa,puppeteer实现网页不同尺寸截图[4]

  2. nodejs之koa2框架快速搭建服务器[5]

  3. Nodejs koa2读取服务器图片返回给前端直接展示[6]

  4. koa官方网站[7]


🙂hexo博客魔改给友链显示网站缩略图的在线服务的相关链接

THE END
nodejs+koa2+puppeteer在线网站截图服务为hexo博客友链提供网站缩略图
https://blog.ganxb2.com/36879.html
作者
chopin gump chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
微信

微信

支付宝

支付宝

🕐如果评论显示“刷新”无法加载,过一会再来康康~🕢 _(≧∇≦」∠)_ (填写常用邮箱即可快速收到回复通知~)