V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
ccbikai
V2EX  ›  Vercel

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

  •  
  •   ccbikai ·
    PRO
    · Dec 17, 2023 · 1910 views
    This topic created in 866 days ago, the information mentioned may be changed or developed.

    之前使用 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 replies    2024-01-10 23:26:21 +08:00
    whileFalse
        1
    whileFalse  
       Dec 18, 2023
    有统计过大概消耗多少毫秒吗
    ccbikai
        2
    ccbikai  
    OP
    PRO
       Dec 18, 2023 via iPhone   ❤️ 1
    @whileFalse cf 在 300ms
    vercel 在 600ms

    Vercel 占用多不会被 kill ,也有缓存
    keepRun
        3
    keepRun  
       Dec 18, 2023 via Android
    感觉可以把处理过的图片存下来,就不用每次去处理了
    ccbikai
        4
    ccbikai  
    OP
    PRO
       Dec 18, 2023 via iPhone
    @keepRun 目前只有 CDN 缓存
    ccbikai
        5
    ccbikai  
    OP
    PRO
       Dec 18, 2023
    @keepRun 看了下 Vercel 自带缓存是可以命中的
    VOfficial
        6
    VOfficial  
       Jan 10, 2024 via Android
    白名单可以添加多个站点吗🤔
    ccbikai
        7
    ccbikai  
    OP
    PRO
       Jan 10, 2024 via iPhone
    @VOfficial 可以的,逗号分隔就行。 你看示例就有多个域名
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2481 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 09:57 · PVG 17:57 · LAX 02:57 · JFK 05:57
    ♥ Do have faith in what you're doing.