开发者社区> 阿里巴巴云原生小助手> 正文

利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务

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

作者:泽尘

更多云原生技术资讯可关注阿里巴巴云原生技术圈

简介

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

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

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

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

1.png

步骤:

  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,读写权限选择公共读 (用于本教程示例,可之后更改)。

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

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

3.png

2. 创建 FC 函数

  • 下载 serverless-image-on-the-fly 项目到本地

    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

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

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

5.gif

总结

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

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

资料

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

阿里巴巴云原生技术圈关注微服务、Serverless、容器、Service Mesh 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”

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

相关文章
【体验有礼】Serverless 极速搭建 Hexo 博客
云起实验室 X Serverless 函数计算邀你极速搭建 Hexo 博客!
60 0
在CentOS上安装搭建PHP+Apache+Mysql的服务器环境方法
本篇给大家分享一下在CentOS上安装搭建PHP+Apache+Mysql的服务器环境方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。
1295 0
Web系统下Office文档的处理
在web环境中,我们经常遇到需要对Office文档进行各种各样的处理,如:格式转化、统计、修改等各种操作,如果使用Office的客户端对象模型直接处理,一般会遇到:效率低;服务器资源负载大等一系列问题,毕竟Office对象实现时主要针对的是客户端的使用而设计的,对于批量和大负载的处理自然效率欠佳。
821 0
OSS实时日志查询——访问记录秒级查询与可视化分析
OSS新发布“OSS访问日志实时查询”,用户可在OSS控制台,对OSS访问日志,进行可视化的实时查询与分析统计。该功能可简化用户对OSS访问记录的审计、统计、事件回溯、运维分析、问题定位等工作,提升运维效率,挖掘日志数据价值,提高基于数据的决策能力,助力业务发展。
2577 0
【最佳实践】大数据时代,通过OSS快照迁移Elasticsearch数据
本文以将自建Elasticsearch迁移至阿里云Elasticsearch中为例,为您介绍通过OSS快照迁移数据的具体方法。
1428 0
急速搭建 Serverless AI 应用:为你写诗
AI model serving 是函数计算一个比较典型的应用场景。数据科学家训练好模型以后往往需要找软件工程师把模型变成系统或者服务,通常把这个过程称之为 model serving。函数计算无需运维和弹性伸缩的特性,正好符合数据科学家对高可用分布式系统的诉求。本文将介绍把一个 TensorFlow CharRNN 训练的自动写五言绝句古诗的模型部署到函数计算的例子。
1787 0
轻松搭建基于 Serverless 的 ThinkPHP 应用
本文演示了如何从零开始搭建一个 Serverless 的 ThinkPHP 的博客应用。如果不想接触 Nginx、Linux 等复杂感念,而且想要以极低的成本托管自己的应用,本文会是一个很好的开始。
1046 0
阿里云服务器CentOS 7搭建SS方法
本篇文章教你如何自建服务器搭建ShadowSocks 开启魔法上网,相信点开这篇文章的小伙伴都懂,这里就不多介绍了 服务器的购买 这里推荐阿里云比较不错,可直接移至阿里云官网购买。 测试 服务器购买完成后首先得测试一下是否可用Windows 先 win + R 输入 cmd,弹出一个黑窗口后在里面.
7681 0
快速搭建基于 Serverless 的 .NET Core 数据库应用
快速搭建基于 Serverless 的 .NET Core 数据库应用 简介 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。
20175 0
1627
文章
0
问答
来源圈子
更多
阿里云 云原生应用平台 肩负阿里巴巴集团基础设施云化以及核心技术互联网化的重要职责,致力于打造稳定、标准、先进的云原生产品,成为云原生时代的引领者,推动行业全面想云原生的技术升级,成为阿里云新增长引擎。商业化产品包括容器、云原生中间件、函数计算等。
+ 订阅
相关文档: 应用高可用服务 AHAS 性能测试 PTS Prometheus监控
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载