[Rust] Rust 中，对网址进行异步快照，并添加水印效果的实践
💥 内容涉及著作权，均归属作者本人。若非作者注明，默认欢迎转载：请注明出处，及相关链接。
Summary: Rust 生态中，关于通过 url 网址，对站点进行拍照，生成网页快照；以及在网页快照上生成时间戳，或者添加水印的实践。
Topics: rust 网页快照 网页截图 水印效果 图片水印
最近的项目需求中，需要实现两个功能——
- 通过 url 网址，对站点进行拍照，生成网页快照；
- 为了避免站点版权纠纷，以及历史留痕。需要在网页快照上生成时间戳，或者添加水印。
是故，笔者经过 crate 比较，实践后，整合了一个笔者认为最合适的解决方案。特此分享，以求抛砖引玉。
新建项目，从 None 开始
为了本次分享的详细和可操作性，我们抛离其它关联项目业务。从零开始一个全新的项目：
cargo new screenshot_watermark --bin
cd screenshot_watermark
我们将在此项目中进行全新的实践。
网页快照 crate 比较和选择
笔者以前曾了解到，Rust 中关于通过 url 网址，对网页截图快照的 crate 还不少，我们仅提及较为成熟的：有通过具体浏览器的 headless 模式的，如 rust-headless-chrome；有使用 WebDriver 模式的，则可以理论支持所有浏览器。
Rust crate 中，在 Chrome 浏览器方面，网页快照库只有 rust-headless-chrome 一个较为成熟；在 WebDriver 方面，笔者测试后，成熟的库有 2 个：fantoccini、thirtyfour。
它们都是异步库。fantoccini 最为成熟，久经考验；headless-chrome 次之，仅对 chrome 浏览器提供支持，秉持“如非必要，不增实体”思维的伙伴们，优先选择；thirtyfour 则最新，还对 tokio、async-std 两个 Rust 运行时（runtime）均提供了支持。
笔者比较后，选择了 fantoccini，但此文中，我们会对它们都做以实践。
首先，让我们编辑 Cargo.toml 文件，依赖项中添加此三个 crate，以及 tokio 运行时。
笔者采用 cargo-edit 工具包进行依赖项的添加：
cargo-edit的使用，请参阅构建 Rust 异步 GraphQL 服务：基于 tide + async-graphql + mongodb（1）- 起步及 crate 选择一文中的工具类 crate 安装部分。
cargo add fantoccini headless-chrome thirtyfour tokio
thirtyfour 默认的运行时选择是 tokio，如果你喜欢使用 async-std，则需要在依赖项中指定 features。
此时，Cargo.toml 文件内容如下：
[package]
name = "screenshot_watermark"
version = "0.1.0"
authors = ["我是谁？"]
edition = "2018"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
fantoccini = "0.17.3"
headless_chrome = "0.9.0"
thirtyfour = "0.24.2"
tokio = "1.6.0"
WebDriver 下载和启动
对于采用 WebDriver 模式的 fantoccini 和 thirtyfour，需要下载各自浏览器的 WebDriver：firefox 的 geckodriver、chrome 的 chromedriver、edge 的 edgedriver，以及 safari 的 safaridriver 等。目前，WebDriver 模式的网页快照 crate，对于一些小众浏览器也提供了支持，如 opera，甚至 IE 等。不过，本文中笔者就不做提及了，开发模式是完全相同的。
各自浏览器的官网，均提供了其 WebDriver 的下载。下载完成后，我们启动时需要指定端口（如果你采用默认端口，请注意代码中更改）。以 firefox 和 chrome 为例：
geckodriver --port=4444
chromedriver --port=4445
网页快照截图
以下代码中，采用 tokio 运行时，async-std 运行时编码相同。
use std::fs;
use fantoccini::ClientBuilder;
use headless_chrome::{
protocol::page::ScreenshotFormat, Browser, LaunchOptionsBuilder,
};
use thirtyfour::prelude::*;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
// 使用 fantoccini 进行网页快照截图 - 开始
// 连接到 webdriver 实例，监听端口 4444
// 4444 端口对应的是 geckodriver
// 在 fantoccini 中如果要使用 chromedriver，请将 chromedriver 的启动端口改为 4444
let mut client =
ClientBuilder::native().connect("http://localhost:4444").await?;
// 访问快照目标网址
client.goto("https://blog.budshome.com").await?;
// 设定快照截图尺寸
client.set_window_size(1280, 1024).await?;
// 网页快照
let screenshot = client.screenshot().await?;
fs::write("screenshot_f.jpg", &screenshot)?;
// 关闭客户端浏览器窗口
client.close().await?;
// 使用 fantoccini 进行网页快照截图 - 结束
// 使用 headless-chrome 进行网页快照截图 - 开始
// 打开客户端浏览器
let options =
LaunchOptionsBuilder::default().build().expect("没有找到 Chrome 应用");
let browser = Browser::new(options)?;
// tab 初始化
let tab = browser.wait_for_initial_tab()?;
// 访问快照目标网址
// 网页快照截图
// JPEG 格式使用 75% 图象质量
let jpg_data = tab
.navigate_to("https://blog.budshome.com")?
.wait_until_navigated()?
.capture_screenshot(ScreenshotFormat::JPEG(Some(75)), None, true)?;
fs::write("screenshot_h.jpg", &jpg_data)?;
// 使用 headless-chrome 进行网页快照截图 - 结束
// 使用 thirtyfour 进行网页快照截图 - 开始
// firefox 浏览器
let caps = DesiredCapabilities::firefox();
let driver = WebDriver::new("http://localhost:4444", &caps).await?;
// 访问快照目标网址
driver.get("https://blog.budshome.com").await?;
// 网页快照
let png_data = driver.screenshot_as_png().await?;
fs::write("screenshot_t_f.jpg", &png_data)?;
// chrome 浏览器
let caps = DesiredCapabilities::chrome();
let driver = WebDriver::new("http://localhost:4445", &caps).await?;
// 访问快照目标网址
driver.get("https://blog.budshome.com").await?;
// 网页快照
let png_data = driver.screenshot_as_png().await?;
fs::write("screenshot_t_c.jpg", &png_data)?;
// 使用 thirtyfour 进行网页快照截图 - 结束
Ok(())
}
运行程序，生成的截图如下所示（为了网页展示，上传服务器时缩小了尺寸）：
笔者体验：fantoccini 最合适，headless-chrome 最为方便。
图片水印效果
Rust 的图像处理 crate 非常丰富，有 image、imagef、imager、andrew、png、jpg、gif、rgb，以及 image 库的子库 imageproc 和 image-png/gif/jpg 等等，琳琅满目。最为成熟、完善的还要数 image，我们如下示例即采用。
笔者实践测试了 andrew、imager、imagef 等，也大抵可用。
在上述代码的 Ok(())之前，添加如下代码，实现网页快照截图增加水印效果。
// 打开网页快照截图
// 此为底图，即要打上水印的图像
let screenshot = image::open("screenshot.jpg").unwrap();
// 转换为 rgb8 图像
let mut screenshot_rgb = screenshot.to_rgb8();
// 水印，采用图片，方便美术加工后
// 当然也可以是文字等
let watermark = image::open("rust-shijian.png").unwrap().to_rgb8();
// 向底图添加水印效果
image::imageops::overlay(&mut screenshot_rgb, &watermark, 900, 800);
// 保存底图
screenshot_rgb.save("screenshot.jpg").unwrap();
笔者的水印图片是微信公众号二维码，在图像右下角。
为了网页展示，上传服务器时缩小了尺寸
结语
Okay，代码全部完成。可以发现，Rust 的图像处理生态不只很完善，使用也非常方便，不逊于 Python、Java 的生态。
以下为技术广告——
- 推荐大家给上面实践和提及的各个 crate 的 github 仓库点赞；
- graphql + wasm（yew）的前端整合实例仓库 sansx/yew-graphql-demo 已经完成，graphql 后端基于 tide-async-graphql-mongodb。sansx 老师后续将会整合到 tide-async-graphql-mongodb。
- 另外，sansx 老师还提供了采用 yes 开发 wasm 的模板项目 sansx/yew-wasm-pack-template，相信不久就会有 sansx 老师的 wasm 开发中文教程。
- 希望大家参与和帮助上述几个项目。
谢谢您的阅读！