Website Shot捕获网站截图

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2k 阅读时长 ≈ 2 分钟
Website-Shot 能生成完整的网页截图📸。

今天是老苏居家隔离的第 55 天。

周二、周三都只是做了一次抗原。

事实证明，大家还是想多了，周一的核酸只是无数次 很重要 中的一次，并没有带来什么变化，传说中的防范区管理依然只是传说。

虽然还没有官宣可以出门，但是事实上大家都已经开始在小区里转悠，小区大门有人看着，暂时还不能出去拿快递，只能等物业送。不过一些不能耽搁的冰鲜物品已经可以由志愿者拿出门证去取了。

周一发了第十批保供物资，看来还得封一段日子呢

老苏一直用 chrome 插件 FireShot 来完成网页的截图，功能挺强大的，截图是即时和不产生流量的，而且不需要第三方网站和登录！更像是在用一个客户端截图，比如微信和 QQ 的截图功能。

但 Website-Shot 机制上不太一样，它是通过输入一个 URL ，由 Nuxt.js 完成渲染后再实现截图的。

什么是 Website-Shot ？

Website-Shot 提供了丰富的界面，可以免费在线制作任何类型的网页截图，没有限制。

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 website-shot ，选择第一个 flowko1/website-shot，版本选择 latest。

卷

在 docker 文件夹中，创建一个新文件夹，将其命名为 websiteshot

文件夹 装载路径 说明
docker/websiteshot /usr/src/website-shot/screenshots 存放截图

端口

本地端口不冲突就行，不确定的话可以用命令查一下

1
2
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 容器端口
3010 3000

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷，老苏更喜欢命令行，搭建环境比较快捷

1
2
3
4
5
6
7
8
9
10
11
12
13
# 新建文件夹 kavita 和 子目录
mkdir -p /volume2/docker/websiteshot

# 进入 kavita 目录
cd /volume2/docker/websiteshot

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name websiteshot \
   -p 3010:3000 \
   -v $(pwd):/usr/src/website-shot/screenshots \
   flowko1/website-shot:latest

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose 文件

1
2
3
4
5
6
7
8
9
10
version: '3'

services:
  websiteshot:
    image: flowko1/website-shot
    container_name: websiteshot
    ports:
      - 3010:3000
    volumes:
      - /volume2/docker/websiteshot:/usr/src/website-shot/screenshots

然后执行下面的命令，在 portainer 中执行也是可以的

1
2
3
4
5
6
7
# 进入目录
cd /volume2/docker/websiteshot

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3010 就能看到主界面

最大分辨率是 1920*1080

支持 png、jpeg、webp 三种格式

截图的文件可以选择保存在服务端

下面以老苏的博客 https://laosu.ml 中的『 极简文件共享服务PicoShare 』 为例，输入 url 后点 shot 按钮

截图完成后

在 File Station 中可以看到截图生成的 png 文件

但是结果有点让人失望，因为似乎还不支持中文，所有的中文都显示为 口

开始折腾

如果就这么放弃，显然不是老苏的作风，从官方的 Dockerfile 看，容器安装了 chromium，所以很可能是因为缺乏中文字体导致的，理清了思路，接下来就好办了

1
2
# 安装中文字体
apk add wqy-zenhei --update-cache --repository http://nl.alpinelinux.org/alpine/edge/testing --allow-untrusted

不需要重启容器，再次截取就是中文的了

参考文档

Flowko/website-shot: 📸 Generate a full web-page screenshot, Website-shot provides rich interface to make any kind of web screenshots online for free with no limits.
地址：https://github.com/flowko/website-shot

docker - 如何在 Alpine headless chrome 中使用中文？ - 堆栈溢出
地址：https://stackoverflow.com/questions/49067625/how-can-i-use-chinese-in-alpine-headless-chrome