作者:泽尘

简介

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

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

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

动态调整图像大小

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

步骤:

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

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

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

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

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

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

总结

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

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

资料

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

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

利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务的更多相关文章

  1. 利用Docker Compose快速搭建本地测试环境

    前言 Compose是一个定义和运行多个Docker应用的工具,用一个YAML(dockder-compose.yml)文件就能配置我们的应用.然后用一个简单命令就能启动所有的服务.Compose编排 ...

  2. 云上快速搭建Serverless AI实验室

    Serverless Kubernetes和ACK虚拟节点都已基于ECI提供GPU容器实例功能,让用户在云上低成本快速搭建serverless AI实验室,用户无需维护服务器和GPU基础运行环境,极大 ...

  3. 利用Columnal网格系统快速搭建网站的基本布局结构

    1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...

  4. 快速搭建 Serverless 在线图片处理应用

    作者:倚贤 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数 ...

  5. docker快速搭建几个常用的第三方服务

    本次和大家分享的内容是使用docker快速搭建工作中常用的第三方的服务,对于有一些互联网背景的公司来说,以下几个服务都是很需要的:redis,rabbit,elasticsearch: 本篇涉及内容深 ...

  6. 快速搭建 Serverless 人脸识别离线服务

    简介 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准 ...

  7. 五分钟快速搭建 Serverless 免费邮件服务

    1. 引言 本文将带你快速基于 Azure Function 和 SendGrid 构建一个免费的Serverless(无服务器)的邮件发送服务,让你感受下Serverless的强大之处. 该服务可以 ...

  8. 五分钟快速搭建Serverless免费邮件服务

    1. 引言 本文将带你快速基于 Azure Function 和 SendGrid 构建一个免费的Serverless(无服务器)的邮件发送服务,让你感受下Serverless的强大之处. 该服务可以 ...

  9. 利用web.py快速搭建网页helloworld

    访问web.py官网 http://webpy.org/ 根据网站步骤,利用 pip install web.py 若没有 PIP 则先安装pip 运行 sudo apt-get install py ...

随机推荐

  1. 14 Zabbix4.4.0系统实现监控checkpoint设备

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 14 Zabbix4.4.0系统实现监控checkpoint设备 1. 前期规划信息 2. 配置 ...

  2. 8.3 NOIP CE反思

    lsc考完以后就CE了,然后滚回去吃*去了! 这次考试都比的一批,整个先是打了暴力然后对拍发现桶有可能炸内存,然后就打了一个hash-map然后......T1 T3全使用了它,结果: 没什么可说的了 ...

  3. 前端与算法 leetcode 48. 旋转图像

    目录 # 前端与算法 leetcode 48. 旋转图像 题目描述 概要 提示 解析 解法一:转置加翻转 解法二:在单次循环中旋转 4 个矩形 算法 传入测试用例的运行结果 执行结果 GitHub仓库 ...

  4. 深入理解计算机系统 第二章 信息的表示和处理 Part2 第二遍

    <深入理解计算机系统> 第三版 第二遍读这本书,每周花两到三小时时间,能读多少读多少(这次看了 29 ~ 34 页) 第一遍对应笔记链接 https://www.cnblogs.com/s ...

  5. 深入理解 DNS

    深入理解 DNS 简介 DNS(Domain Name System)域名系统,它是一个将域名和 IP 地址相互映射的一个分布式数据库,把容易记忆的主机名转换成主机 IP 地址. DNS使用 TCP ...

  6. Kafka needs no Keeper(关于KIP-500的讨论)

    写在前面的 最近看了Kafka Summit上的这个分享,觉得名字很霸气,标题直接沿用了.这个分享源于社区的KIP-500,大体的意思今后Apache Kafka不再需要ZooKeeper.整个分享大 ...

  7. Arduino 配置 ESP8266环境

    Arduino 配置 ESP8266环境 将 http://arduino.esp8266.com/stable/package_esp8266com_index.json 添加到 [附加开发板管理器 ...

  8. Go 多变量赋值时注意事项

    说到多变量赋值时,先计算所有相关值,然后再从左到右依次赋值,但是这个规则不适用于python我们来看一例: package main import "fmt" func main( ...

  9. 【评测机】评测时报错cc1plus: fatal error: /xx/xx/main.cpp: Permission denied compilation terminated.的解决方法

    事情是这亚子发生的,原本建立评测机的时候就出现过这个问题,但莫名其妙就解决了. 报错的文件路径是位于docker内的,所以本质上这个错误是docker内的没有权限执行相关文件. 原因是centos7中 ...

  10. C语言|博客作业07

    这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9935 我在这个课程的 ...