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

使用 Vercel Edge 处理图片,支持缩放、剪裁、水印、滤镜等功能

  •  
  •   ccbikai ·
    ccbikai · 2023-12-17 17:43:57 +08:00 · 957 次点击
    这是一个创建于 367 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前使用 Cloudflare Worker 处理图片 /t/994952 , 由于 Worker 的免费版本只能占用 10ms CPU, 经常资源超出占用,裂图频率很高。刚好今天有空,就适配了 Vercel Edge ,分享出来有兴趣的可一起探索。

    Vercel 官方版本也支持处理图片,但是限制 1000 张原图/月,支持缩放。使用 Vercel Edge 处理图片, 可以支持缩放、剪裁、水印、滤镜等功能。但是 Vercel 免费版每月只用 100G 流量,真实使用建议套一个 CDN 。


    剪裁

    rotate

    滤镜

    filter

    图片水印

    watermark

    缩放+旋转+文字水印

    resize & rotate & draw_text

    理论上支持 Photon 的各种操作,有兴趣的可以查看图片地址,按照 Photon 文档 https://docs.rs/photon-rs/latest/photon_rs/ 修改参数自己尝试。如果发现异常可以评论反馈给我。

    更多演示可以到我博客查看 https://chi.miantiao.me/post/vercel-edge-image/


    此方案已经开源在我的 Github, 有需要的可以按照文档部署。

    ccbikai/vercel-edge-image - GitHub

    7 条回复    2024-01-10 23:26:21 +08:00
    whileFalse
        1
    whileFalse  
       2023-12-18 01:58:29 +08:00
    有统计过大概消耗多少毫秒吗
    ccbikai
        2
    ccbikai  
    OP
       2023-12-18 08:27:04 +08:00 via iPhone   ❤️ 1
    @whileFalse cf 在 300ms
    vercel 在 600ms

    Vercel 占用多不会被 kill ,也有缓存
    keepRun
        3
    keepRun  
       2023-12-18 09:36:23 +08:00 via Android
    感觉可以把处理过的图片存下来,就不用每次去处理了
    ccbikai
        4
    ccbikai  
    OP
       2023-12-18 10:34:08 +08:00 via iPhone
    @keepRun 目前只有 CDN 缓存
    ccbikai
        5
    ccbikai  
    OP
       2023-12-18 10:49:00 +08:00
    @keepRun 看了下 Vercel 自带缓存是可以命中的
    VOfficial
        6
    VOfficial  
       343 天前 via Android
    白名单可以添加多个站点吗🤔
    ccbikai
        7
    ccbikai  
    OP
       343 天前 via iPhone
    @VOfficial 可以的,逗号分隔就行。 你看示例就有多个域名
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1006 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:00 · PVG 05:00 · LAX 13:00 · JFK 16:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.