一鍵截圖、壓縮 & 上傳至阿里 OSS

語言: CN / TW / HK

傾城之鏈 ,旨在雲集全球優秀網站,方便你我探索網際網路中更廣闊的世界 。在傾城,您可以分享(提交)所歡喜的網站;後臺將自動為所提交網站首頁進行 截圖 、壓縮、並上傳至阿里雲 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.