浏览器是如何实现 CSS 滤镜的？兼谈如何使用 govips 实现同样的滤镜效果
n0vad3v · n0vad3v · 2023-08-16 12:32:40 +08:00 · 884 次点击这是一个创建于 500 天前的主题，其中的信息可能已经有所发展或是发生改变。
文章正文链接： 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 的来临时添加和预览：
比如这是水印：
这是名为 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/ 看到。
 |
1
flyqie 2023-08-16 16:39:55 +08:00
|
Select Language
