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

查看 16|回复 0
作者:n0vad3v   
文章正文链接: 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 的来临时添加和预览:
比如这是水印:
[td]

[/td]
[td]

[/td]
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 的滤镜:
[td]

[/td]
[td]

[/td]
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 )来大幅减少图片体积,加速图片加载速度,比如:
[td]

[/td]
[td]

[/td]
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= 让图片锐化等等。
[td]

[/td]
[td]

[/td]
[td]

[/td]
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/ 看到。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部