V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
n0vad3v
V2EX  ›  程序员

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

  •  
  •   n0vad3v ·
    n0vad3v · 2023-08-16 12:32:40 +08:00 · 859 次点击
    这是一个创建于 465 天前的主题,其中的信息可能已经有所发展或是发生改变。

    文章正文链接: 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 的来临时添加和预览:

    比如这是水印:

    img img
    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 的滤镜:

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

    img img
    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= 让图片锐化等等。

    img img
    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/ 看到。

    2 条回复    2023-08-16 20:33:40 +08:00
    flyqie
        1
    flyqie  
       2023-08-16 16:39:55 +08:00
    总感觉。。。

    有点像 imgproxy.net 里的某个功能?
    n0vad3v
        2
    n0vad3v  
    OP
       2023-08-16 20:33:40 +08:00
    @flyqie 看了一下发现还真有点像 😂 不过他们价格好贵哇,起步价就是 499USD/yr (而且还有并发限制)

    我们 WebP Cloud 的话提供免费额度(中小型网站的话免费 Plan 基本就已经可以 cover 了),且没有并发限制,所有功能对所有用户都开放(付费和免费唯一的差别就是每日访问数量限制和缓存大小)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2677 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:06 · PVG 11:06 · LAX 19:06 · JFK 22:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.