泽尘
简介
随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验。目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户设备的媒体信息来请求特定的图像副本。
预先为一份图像存放多份具有不同尺寸副本的行为,经常是通过阿里云函数计算FC以及阿里云对象存储OSS两大产品实现的。用户事先为FC中的函数设置对象存储触发器,当在存储桶中创建了新对象(即propertynames行为,此处指在OSS桶中存放了图像),通过OSS触发器来触发函数对刚刚存放的图像进行处理,处理成不同尺寸的副本后,将这些副本存放进OSS桶。
上述方法的特点是预先处理,如果要处理的图像尺寸较多,那么当图像数量非常大的时候,会占用很多存储空间。假设要处理的图像尺寸数目为x,图像数量为y,平均每份图像的大小为z,那么要占用的存储空间为x y z 。
<强>动态调整图像大小强>
为了避免无用的图像占用存储空间,可以使用动态调整图像大小的方法。在OSS桶中预先只为每份图像存放一个副本,当前端根据用户设备的媒体信息来请求特定尺寸图像副本时,再生成相关图像。
步骤:
-
<李>用户通过浏览器请求OSS桶中特定的图像资源,假设为800 * 600的image.jpg。李>
<李> OSS桶中没有相关的资源,将该请求重定向至生成特定尺寸图像副本的api地址。李>
<李>浏览器根据重定向规则去请求调整图像大小的api地址。李>
<李>触发函数计算的函数来执行相关请求。李>
<李>函数从OSS桶中下载到原始图像image.jpg,根据请求内容生成调整后的图像,上传至OSS桶中。李>
<李>将请求重定向至图像在OSS桶中的位置。李>
<李>浏览器根据重定向规则去OSS桶中请求调整大小后的图像。李>
上述方法的特点是:
-
<李>即时处理。李>
<李>降低存储成本。李>
<李>无需运维。李>
实践
1。创建并配置OSS
-
<李>
在OSS控制台中,创建一个新的桶,读写权限选择公共读(用于本教程示例,可之后更改)。
-
<李>回源类型:重定向李>
<李>回源条件:HTTP状态码404李>
<李>回源地址:选择添加前后缀,并在回源域名中填写一个已接入阿里云备案的自定义域名。李>
<李>重定向代码:302李>
李
2。创建FC函数
-
<李>下载serverless-image-on-the-fly项目到本地李>
<代码> git克隆git@github.com: ChanDaoH/serverless-image-on-the-fly.git 代码>
-
<李>进入项目目录,执行<代码> npm安装代码> 李>
<李>填写<代码>模板。yml 代码>文件中的相关内容:OSS_REGION, OSS_BUCKET_NAME,自定义域名李>
<代码类=" language-yaml "> ROSTemplateFormatVersion:“2015-09-01” 变换:“阿里巴巴:serverless - 2018 - 04 - 03” 资源: serverless-image: 类型:“阿里巴巴::Serverless::服务” 属性: 描述:这是serverless-image服务 政策: ——AliyunOSSFullAccess image-resize: 类型:“阿里巴巴::Serverless::功能” 属性: 处理程序:src/index.handler 运行时:nodejs10 超时:60 MemorySize: 512 CodeUri:。/EnvironmentVariables: OSS_REGION: oss-cn-shanghai # oss地区,如oss-cn-shanghai oss-cn-hangzhou OSS_BUCKET_NAME: images-xxx # oss桶的名字 事件: httpTrigger: 类型:HTTP 属性: AuthType:匿名 方法: ——得到 -职位 william.functioncompute.com: #域名 类型:“阿里巴巴::Serverless:: CustomDomain” 属性: HTTP协议: RouteConfig: 路线: “/*”: 名:serverless-image FunctionName: image-resize利用FC + OSS快速搭建Serverless实时按需图像处理服务