大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
作者:泽尘
创新互联建站:从2013年成立为各行业开拓出企业自己的“网站建设”服务,为数千家公司企业提供了专业的网站设计制作、做网站、网页设计和网站推广服务, 定制开发由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验。目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户设备的 media 信息来请求特定的图像副本。
预先为一份图像存放多份具有不同尺寸副本的行为,经常是通过 阿里云函数计算 FC 以及阿里云对象存储 OSS 两大产品实现的。用户事先为 FC 中的函数设置对象存储触发器,当在存储桶中创建了新对象(即 putObject 行为,此处指在 OSS bucket 中存放了图像),通过 OSS 触发器来触发函数对刚刚存放的图像进行处理,处理成不同尺寸的副本后,将这些副本存放进 OSS bucket。
上述方法的特点是预先处理,如果要处理的图像尺寸较多,那么当图像数量非常大的时候,会占用很多存储空间。假设要处理的图像尺寸数目为 x、图像数量为 y、平均每份图像的大小为 z,那么要占用的存储空间为 x y z。
动态调整图像大小
为了避免无用的图像占用存储空间,可以使用动态调整图像大小的方法。在 OSS bucket 中预先只为每份图像存放一个副本,当前端根据用户设备的 media 信息来请求特定尺寸图像副本时,再生成相关图像。
步骤:
上述方法的特点是:
在 OSS 控制台 中,创建一个新的 Bucket,读写权限选择公共读 (用于本教程示例,可之后更改)。
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
image.jpg
。https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg
。会有如下效果:
width * height
大小的 image.jpg。width * height
命名的目录,该目录下有 image.jpg。我们通过 FC + OSS 搭建了一个实时按需图像处理服务,该服务拥有以下特点:
“阿里巴巴云原生技术圈关注微服务、Serverless、容器、Service Mesh 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”