浏览器是如何实现 CSS 滤镜的？兼谈如何使用 govips 实现同样的滤镜效果

文章正文链接： https://blog.webp.se/govips-filter-zh/

大家好，这里是 WebP Cloud 的 Nova ，我们在尝试做一个 SaaS 版本的 WebP Server Go，类似于一个图片 CDN 。

最近我们给 WebP Cloud 加入了图片加水印和滤镜的效果，期间研究了浏览器上 CSS 滤镜的实现方式以及 Golang 中如何实现同样的滤镜效果（此外还给 govips 仓库贡献了相关代码，我们的 PR： https://github.com/davidbyttow/govips/pull/377 ），以上文章便是我们的分享。

水印和滤镜可以通过传入 GET Params 的来临时添加和预览：

比如这是水印：


`https://559a238.webp.ee/images/create-proxy.png`	`https://559a238.webp.ee/images/create-proxy.png?visual_effect=watermark,text__5oiR55qE5LiW55WM5piv5LuA5LmI,width__0.1,height__0.1,offset_x__0.23,offset_y__0.34,opacity__1,color__001489,font__WGlhb2xhaVND`

这是名为 moon 的滤镜：


`https://559a238.webp.ee/images/create-proxy.png`	`https://559a238.webp.ee/images/create-proxy.png?visual_effect=filter,name__moon`

当然，以上效果都可以在 WebP Cloud Dashboard 上设置并对所有图片生效（比如水印功能全局生效的话可以减少图片被盗用的风险，而且不需要站长手动在上传前给每个图片加上水印）

关于 WebP Cloud：用户只需要用 GitHub 登录，然后填写源站地址，即可获得一个新的带 WebP 转换的，带 CDN 和缓存的新地址，比如 100KB 的图片 https://blog.webp.se/hetzner-arm64/c1-board.png 地址变成 WebP 版本的只有 60KB 的 https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.png 地址（且画质几乎不会衰退）。

比如下图中就是从我们博客上的一个例子。（我们自己的博客 https://blog.webp.se ，和我们团队成员的博客/网站都在使用 WebP Cloud ，吃自己狗粮是我们文化的一部分。）

我们的主要功能是通过将图片从一些比较”老旧“的格式（比如 PNG ，JPG ）转换为一些比较”新“的格式（比如 WebP/AVIF ）来大幅减少图片体积，加速图片加载速度，比如：


`https://blog.webp.se/hetzner-arm64/c1-board.jpg`	`https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg`
107.81 KB	64.52 KB

此外，你还可以通过传入 ?width= 参数来直接生成缩略图，传 ?flip= 让图片旋转， ?sharp= 让图片锐化等等。


`https://blog.webp.se/hetzner-arm64/c1-board.jpg`	`https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg?width=200`	`https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg?flip=b`

更多我们支持的功能可以在： https://docs.webp.se/webp-cloud/feature/ 和 https://docs.webp.se/webp-cloud/visual-effects/ 看到。