文章正文链接: 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
|