开发者社区> 泽尘> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

快速搭建 Serverless 实时按需图像处理服务

简介: 示例讲述了如何快速地利用 FC 函数计算以及 OSS 对象存储服务搭建一个按需转换图像的在线图像处理服务。达到的效果为: 当前端根据用户设备的 media 信息来请求特定尺寸图像副本时,若对象存储中未存在,则通过函数动态生成相关图像存储到对象存储中并返回。
+关注继续查看

简介

随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验。目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户设备的 media 信息来请求特定的图像副本。

预先为一份图像存放多份具有不同尺寸副本的行为,经常是通过 阿里云函数计算 FC 以及阿里云对象存储 OSS 两大产品实现的。用户事先为 FC 中的函数设置对象存储触发器,当在存储桶中创建了新对象(即 putObject 行为,此处指在 OSS bucket 中存放了图像),通过 OSS 触发器来触发函数对刚刚存放的图像进行处理,处理成不同尺寸的副本后,将这些副本存放进 OSS bucket。

上述方法的特点是预先处理,如果要处理的图像尺寸较多,那么当图像数量非常大的时候,会占用很多存储空间。假设要处理的图像尺寸数目为 x、图像数量为 y、平均每份图像的大小为 z,那么要占用的存储空间为 x y z。

动态调整图像大小
为了避免无用的图像占用存储空间,可以使用动态调整图像大小的方法。在 OSS bucket 中预先只为每份图像存放一个副本,当前端根据用户设备的 media 信息来请求特定尺寸图像副本时,再生成相关图像。

architecture

步骤:

  1. 用户通过浏览器请求 OSS bucket 中特定的图像资源,假设为 800 * 600 的 image.jpg。
  2. OSS bucket 中没有相关的资源,将该请求重定向至生成特定尺寸图像副本的 api 地址。
  3. 浏览器根据重定向规则去请求调整图像大小的 api 地址。
  4. 触发函数计算的函数来执行相关请求。
  5. 函数从 OSS bucket 中下载到原始图像 image.jpg,根据请求内容生成调整后的图像,上传至 OSS bucket 中。
  6. 将请求重定向至图像在 OSS bucket 中的位置。
  7. 浏览器根据重定向规则去 OSS bucket 中请求调整大小后的图像。

上述方法的特点是:

  1. 即时处理。
  2. 降低存储成本。
  3. 无需运维。

实践

1. 创建并配置 OSS

  • 在 OSS 控制台 中,创建一个新的 Bucket,读写权限选择公共读 (用于本教程示例,可之后更改)。

create_oss_bucket

  • 在 Bucket 的基础设置中,设置镜像回源。

    • 回源类型:重定向
    • 回源条件:HTTP 状态码 404
    • 回源地址:选择添加前后缀,并在回源域名中填写一个已接入阿里云备案的自定义域名。
    • 重定向 Code:302

config_redirect

2. 创建 FC 函数

git clone git@github.com:ChanDaoH/serverless-image-on-the-fly.git

  • 进入项目目录,执行 npm install
  • 填写 template.yml 文件中的相关内容:OSS_REGION、OSS_BUCKET_NAME、自定义域名
ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  serverless-image:
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Description: This is serverless-image service
      Policies:
        - AliyunOSSFullAccess
    image-resize:
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: src/index.handler
        Runtime: nodejs10
        Timeout: 60
        MemorySize: 512
        CodeUri: ./
        EnvironmentVariables:
          OSS_REGION: oss-cn-shanghai # oss region, such as oss-cn-shanghai、oss-cn-hangzhou
          OSS_BUCKET_NAME: images-xxx # oss bucket name
      Events:
        httpTrigger:
          Type: HTTP
          Properties:
            AuthType: ANONYMOUS
            Methods:
              - GET
              - POST
  william.functioncompute.com: # domain name
    Type: 'Aliyun::Serverless::CustomDomain'
    Properties:
      Protocol: HTTP
      RouteConfig:
        routes:
          '/*':
            ServiceName: serverless-image
            FunctionName: image-resize

3. 测试动态调整图像

  • 在 OSS bucket 中上传一张图像,假设为 image.jpg

oss_image_1

  • 此时请求 https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg。会有如下效果:

    1. 下载到指定 width * height 大小的 image.jpg。
    2. OSS bucket 中有 width * height 命名的目录,该目录下有 image.jpg。

show

总结

我们通过 FC + OSS 搭建了一个实时按需图像处理服务,该服务拥有以下特点:

  1. 即时处理
  2. 降低存储成本
  3. 无需运维

资料

  1. 函数计算 Function Compute
  2. Aliyun Serverless VSCode 插件
  3. Fun

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《使用Serverless服务快速开发小程序》电子版地址
《使用Serverless服务快速开发小程序》PPT
0 0
Serverless,FaaS 和托管服务之间的关系
Serverless,FaaS 和托管服务之间的关系
0 0
如何在阿里云快速上手Serverless服务
Serverless中文名称为无服务器模式的一种云原生开发模型,可以让程序员专注于构建整个应用逻辑和运行程序,而不需要进行服务器的操心。这一部分可以理解成这样,程序员减少了不必要的工作,然后将服务器外包给各个云开发商,比如说我们现在用的众多云(阿里云微软云、亚马逊和Google云服务等等)开发人员可以通过将产品开苏的打包到容器当中然后进行部署即可。
0 0
Serverless比微服务拆分服务还要细
Serverless比微服务拆分服务还要细
0 0
Serverless实践-Node服务上线部署
本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器实现Node服务(Node开发的后端应用)的上线部署
0 0
基于 ES 的日志Serverless 服务
本文整理自阿里云高级产品专家赵弘扬(洪阳)在 阿里云Elasticsearch 自研引擎年度发布 的演讲。
0 0
Serverless Kubernetes 容器服务介绍|学习笔记
快速学习 Serverless Kubernetes 容器服务介绍
0 0
我的 Serverless 实战 — 云函数与触发器的创建与使用 ( 开通腾讯云 “ 云开发 “ 服务 | 创建云函数 | 创建触发器 | 测试触发器 )(三)
我的 Serverless 实战 — 云函数与触发器的创建与使用 ( 开通腾讯云 “ 云开发 “ 服务 | 创建云函数 | 创建触发器 | 测试触发器 )(三)
0 0
我的 Serverless 实战 — 云函数与触发器的创建与使用 ( 开通腾讯云 “ 云开发 “ 服务 | 创建云函数 | 创建触发器 | 测试触发器 )(二)
我的 Serverless 实战 — 云函数与触发器的创建与使用 ( 开通腾讯云 “ 云开发 “ 服务 | 创建云函数 | 创建触发器 | 测试触发器 )(二)
0 0
+关注
泽尘
专注于函数计算工具链研发
文章
问答
来源圈子
更多
专注 Serverless、微服务、函数计算、Serverless 应用引擎、云原生技术
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《Serverless 在大规模数据处理的实践》
立即下载
搭建基于 Serverless 的在线转换工具
立即下载
网易云音乐音视频算法处理的 Serverless 探索之路
立即下载