V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
foam
V2EX  ›  程序员

在 AWS 使用 Lambda@Edge 处理图片的最佳实践

  •  
  •   foam ·
    foamzou · 2020-08-31 12:49:56 +08:00 · 2205 次点击
    这是一个创建于 1574 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目地址: https://github.com/foamzou/aws-lambda-edge-image-process

    包含 docker 环境和简单的图片处理代码;欢迎大家 star 、fork 或提交 pr 以改善该实践

    这是什么

    类似阿里云 OSS 的图片处理服务、腾讯云的数据万象。

    因为 AWS 并没有单独将图片处理单独发布服务,只提供了 lambda 配合 CloudFront 用于处理这类需求。因此我设计了一套方案用于实现图片处理的需求

    有了本方案,前端可以在原有的 cdn 图片链接后面拼接参数,获取对应的缩略图、加水印等图片处理需求。

    前端使用说明

    url 构成:https://cdn 域名 /文件名 @<参数值 1><参数名 1>_<参数值 2><参数名 2>.期望转换的文件格式

    例子: https://d1xxxxxxxx.cloudfront.net/foamzou/image/4951f0e35a37e5190e78798dcfcad984.jpg@1020w_160h_0e_1l_70q.webp

    参数

    • w: 指定目标缩略图的宽度。1-4096
    • h: 指定目标缩略图的高度。1-4096
    • e: 缩放优先边。0:长边优先,1:短边优先,2:强制按指定宽高缩放。默认为 0
    • l: 目标缩略图大于原图是否处理。如果值是 1, 即不处理;是 0,表示处理。默认为 0
    • p: 比例百分比。 小于 100,即是缩小,大于 100 即是放大。1-1000 。如果参数 p 跟 w 、h 合用时,p 将直接作用于 w 、h (乘以 p%)得到新的 w 、h,例如 100w_100h_200p 的作用跟 200w_200h 的效果是一样的。默认为 100
    • q: 质量百分比。1-100 。默认为 80
    • r: 是否使用渐进式 jpeg 。0:不使用,1 使用。默认为 0 。只有在输出格式为 jpg 时,该参数才会生效。注意:1. 小尺寸图片不建议使用,因为渐进式 jpeg 会比原图大; 2. 能够使用 webp 尽量使用 webp ; 3. 渐进式展示图片的最佳方案应当是前端同时渲染小图和大图,动画过度到大图
    • .format 格式转换。目前支持 jpg, png, webp 。若保留原文件格式,那么 .format 可以不添加

    注意

    当总面积超过 4096px * 4096px,或者单边长度超过 4096px * 4,那么不会对图片进行缩放处理

    具体方案和部署步骤

    请参考 《在 AWS 使用 Lambda@Edge 处理图片的最佳实践》

    3 条回复    2023-04-05 22:32:00 +08:00
    Wien
        1
    Wien  
       2020-08-31 13:53:02 +08:00
    写得不错,目前在小型网站上用了 s3 的静态网站托管并设定了重定向规则(未生成缩略图时重定向回服务器生成缩略图)。
    foam
        2
    foam  
    OP
       2020-08-31 20:24:29 +08:00 via Android
    @Wien 纯前端业务吗😂
    weixiangzhe
        3
    weixiangzhe  
       2023-04-05 22:32:00 +08:00
    正在找 已 start
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2860 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:37 · PVG 08:37 · LAX 16:37 · JFK 19:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.