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

使用 Cloudflare Worker 处理图片,支持缩放、剪裁、水印等功能

  •  
  •   ccbikai · 2023-11-24 20:11:50 +08:00 · 1888 次点击
    这是一个创建于 375 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 Photon 、Squash WebAssembly 、Cloudflare Worker 做了一个图片缩放服务。

    Photon 的功能基本都支持。

    支持:

    • 支持 PNG 、JPG 、BMP 、ICO 、TIFF 格式图片处理
    • 可输出 JPG 、PNG 、WEBP 格式图片,默认输出 WEBP 格式图片
    • 支持管道,可以执行多个操作
    • 支持 Cloudflare 缓存
    • 支持图片地址白名单,防滥用
    • 异常降级,如果处理失败返回原图(异常场景不缓存)

    代码地址:https://github.com/ccbikai/cloudflare-worker-image

    欢迎 Star , 一起修复 Bug


    演示

    旋转

    rotate

    剪裁

    rotate

    图片水印

    watermark

    管道操作

    缩放+旋转+文字水印

    resize & rotate & draw_text

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

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

    第 1 条附言  ·  2023-11-25 08:45:13 +08:00

    Cloudflare 官方也有图片处理,但是需要绑卡和付费套餐。

    Photon 除了 缩放、剪裁、水印等基础功能,还支持滤镜、图像校正等功能。

    可以使用这两个工具探索:

    https://silvia-odwyer.github.io/photon/demo.html

    https://image-demo.denoflare.dev/

    官方文档:

    96 functions are available, including:

    • Transformations: Resize, crop, and flip images.
    • Image correction: Hue rotation, sharpening, brightness adjustment, adjusting saturation, lightening/darkening all within various colour spaces.
    • Convolutions: Sobel filters, blurs, Laplace effects, edge detection, etc.,
    • Channel manipulation: Increasing/decreasing RGB channel values, swapping channels, removing channels, etc.
    • Monochrome effects: Duotoning, greyscaling of various forms, thresholding, sepia, averaging RGB values
    • Colour manipulation: Work with the image in various colour spaces such as HSL, LCh, and sRGB, and adjust the colours accordingly.
    • Filters: Over 30 pre-set filters available, incorporating various effects and transformations.
    • Text: Apply text to imagery in artistic ways, or to watermark, etc.,
    • Watermarking: Watermark images in multiple formats.
    • Blending: Blend images together using 10 different techniques, change image backgrounds.

    目前在 Worker 里边能支撑多少我没有测试(免费 Worker 有内存和CPU运行时间限制),参数都是透穿的,大家可以按照修改参数测试, 参数说明

    比如滤镜: filter!radio

    11 条回复    2023-11-26 15:18:44 +08:00
    GooMS
        1
    GooMS  
       2023-11-24 23:15:56 +08:00 via Android
    挺好的,如果量多可以买 cf pro
    est
        2
    est  
       2023-11-24 23:33:37 +08:00
    cf worker 好像直接支持图片操作。。。
    ccbikai
        3
    ccbikai  
    OP
       2023-11-25 00:08:17 +08:00 via iPhone
    @est 是指 Cloudflare Images 吗?
    Chad0000
        5
    Chad0000  
       2023-11-25 05:27:00 +08:00 via iPhone
    @journalist
    之前我还记得需要付费 plan 才可以
    ccbikai
        7
    ccbikai  
    OP
       2023-11-25 08:11:23 +08:00 via iPhone
    @journalist
    @est 这个不包含着免费套餐里
    whileFalse
        8
    whileFalse  
       2023-11-26 01:23:37 +08:00
    worker 的执行时间碰到大图算不完吧?
    ccbikai
        9
    ccbikai  
    OP
       2023-11-26 09:34:23 +08:00 via iPhone
    @whileFalse 目前看 cpu 超时占 1%,内存超出的占 5%

    大图还是处理不了。目前我测的是宽边 2048
    whileFalse
        10
    whileFalse  
       2023-11-26 14:43:55 +08:00 via Android
    @ccbikai 那就是最多 400 万像素。嗯....对于现代照片来说基本没用....
    ccbikai
        11
    ccbikai  
    OP
       2023-11-26 15:18:44 +08:00
    @whileFalse #10 是的, 就是为了尝试下运行 WASM
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1081 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 19:11 · PVG 03:11 · LAX 11:11 · JFK 14:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.