一键截图、压缩 & 上传至阿里 OSS

倾城之链 ，旨在云集全球优秀网站，方便你我探索互联网中更广阔的世界 。在倾城，您可以分享（提交）所欢喜的网站；后台将自动为所提交网站首页进行 截图 、压缩、并上传至阿里云 OSS，从而在对应介绍页引用，展示给用户。此篇文章在于分享，如何实现：一键自动化为指定网站截图、压缩 & 上传至阿里 OSS。

写在前言

在系统的设计理念上，我认为，当下还不足以朝着超大且强的方向，该是类如编写代码般，按照功能模块，封装出一个函数（微组件），然后按需将其组合使用；从而达到 易于使用、便于维护，可复用、可扩展 的目的。另外就是，无论是工作、还是生活，应该尽可能多地、将些可能会重复做的事儿，抽象出来，以代码实现，从而提升效率，节省时间，使得可有更多时间享受生活，学习新事物。

在搭建 倾城之链 周边能力时，也是基于这些思想，这使得整个过程轻松，且有条理。早先所发布的Arya Jarvis，同样是这些理念下的产物。

实现“一键截图、压缩 & 上传至阿里 OSS”，每一步都有对应工具，只需将其串联即可；具体代码实现，可参见在 Github 创建的 screenshot-and-upload-to-ali-oss 仓库。具体使用方式，在下文中有做详细说明。

如何使用

安装依赖

git clone https://github.com/nicejade/screenshot-and-upload-to-ali-oss.git
cd screenshot-and-upload-to-ali-oss
yarn

额外地，您需要安装 screenshoteer 。自动化为指定网页截图，在 Node.js 领域，最好用的工具莫过于谷歌公司所推出的 puppeteer ，功能强大，使用简单。而 screenshoteer 是对 puppeteer 的再封装，使用起来更为方便，因此就直接用了它。具体安装方式如下：

Make website screenshots and mobile emulations from the command line.

yarn add global screenshoteer
# Or
npm i screenshoteer -g

您如果只需对网站进行截图，只需用 screenshoteer 即可；它不仅可以自定义尺寸（宽高，全屏），模拟不同设备（如指定为 "iPhone 10"），而且还可指定格式（如 pdf ）、指定主题（如 dark ），保存文件名等等，其他如排除图片，关联用户名密码，也都是支持，具体可参见其 Example 说明 。

隐私配置

考虑到要上传至 OSS，其中需要用到些 私密配置 ；因此，这里需要您自行配置；只需在 根目录 下，创建 secret.config.js 文件，具体内容与格式，可以参考 secret.config.example.js。

对于其中字段需要说明下， tinifyKey 为 TinyPNG 压缩秘钥；使用邮箱登录 TinyPNG ，即可根据免费:free:账号生成 API Key，可供每月 500 张图片压缩处理。其余四个字段，皆为 阿里云 OSS 所需，在其后台操作下，即可获得。需要说明下的是，它功能强大，支持对图片做各种处理（加水印、格式转换等）；价格按所用收费，相对较为便宜。

使用命令

在项目根目录下，可以基于 npm link 命令，将 screenshot 命令 link 至全局，即可方便使用；具体操作方式如下：

screenshot --url http://nicelinks.site/
# OR
screenshot --url http://nicelinks.site/ -ns -nu
# OR
screenshot --url http://nicelinks.site/ -nt -nu

参数说明

参数 简写 功能描述 --url -u 指定要截图网站的 url 地址. --noscreenshot -ns 无需截图，上传本地图片. --notinify -nt 不压缩图片，直接上传. --noupload -nu 不上传截图至指定的 OSS.