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

🙂前言

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

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

😚网站截图插件在线服务

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

• thum.io

​ 代码：

1

<img class="links-picture" src="https://image.thum.io/get/width/300/crop/800/allowJPG/wait/20/noanimate/<%= url_for(each.link) %>" alt="<%= each.title %>">

参数设置：

Full list of image modifier options

• urlscan.io

  代码：

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">

• wordpress插件browser-shots

  代码：已失效，请勿使用

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');
?>

• screenshotmaster

  代码：

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？

  

• selenium

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

• python

  pil和pillow

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

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

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

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

• koa2_puppeteer的github仓库

• 本地服务启动成功后百度网站截图效果

• 文件目录

  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博客魔改给友链显示网站缩略图的在线服务的相关链接

『旅行者』，帮小波关注一波公众号吧。

小波需要100位关注者才能申请红包封面设计资格，万分感谢！

关注后可微信小波，前66的童鞋可以申请专属红包封面设计。