Shulou(Shulou.com)06/02 Report--

Author: Zedun

Brief introduction

With the explosive growth of devices with different screen sizes and resolutions, developers often need to provide images of all sizes to ensure a good user experience. At present, it is a common practice to store multiple copies of different sizes for an image in advance, and request specific copies of the image at the front end according to the media information of the user equipment.

The behavior of storing multiple copies of different sizes for an image in advance is often realized through Ali cloud function computing FC and Ali cloud object storage OSS. The user sets the object storage trigger for the function in FC in advance. When a new object is created in the bucket (that is, the putObject behavior, in this case, the image is stored in the OSS bucket), the OSS trigger is used to trigger the function to process the image that has just been stored. After processing it into copies of different sizes, these copies are stored in OSS bucket.

The characteristic of the above method is pre-processing, if the image size to be processed is large, then when the number of images is very large, it will take up a lot of storage space. Assuming that the number of images to be processed is x, the number of images is y, and the average size of each image is z, then the storage space to be occupied is x y z.

Dynamically resize the image

In order to avoid useless images taking up storage space, the method of dynamically resizing the image can be used. In OSS bucket, only one copy of each image is stored in advance, and when the current end requests a copy of the image of a specific size according to the media information of the user equipment, the relevant image is generated.

Steps:

The user requests a specific image resource in the OSS bucket through the browser, assuming an image.jpg of 800x600. There are no related resources in OSS bucket, so redirect the request to the api address that produces a copy of the image of a specific size. The browser requests an api address that resizes the image according to the redirection rule. Triggers the function calculated by the function to execute the relevant request. The function is downloaded from OSS bucket to the original image image.jpg, and the adjusted image is generated according to the content of the request, and uploaded to OSS bucket. Redirect the request to the position of the image in the OSS bucket. According to the redirection rule, the browser goes to OSS bucket to request the resized image.

The characteristics of the above methods are:

Deal with it immediately. Reduce storage costs. No need for operation and maintenance. Practice 1. Create and configure OSS

In the OSS console, create a new Bucket with read and write permissions selected Public read (for example in this tutorial, but can be changed later).

In the basic settings of Bucket, set the image back to origin. Origin-pull type: redirect Origin-pull condition: HTTP status code 404 Origin-pull address: select to add a prefix and suffix, and enter a custom domain name that has been connected to Aliyun for registration. Redirect Code:302

two。 Create a FC function to download the serverless-image-on-the-fly project locally

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

Enter the project directory Perform npm install to fill in the relevant contents of the template.yml file: OSS_REGION, OSS_BUCKET_NAME, Custom domain 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 deployment function to the cloud can be deployed through the Serverless VSCode plug-in can be deployed through fun. Test the dynamic adjustment image to upload an image in OSS bucket, assuming image.jpg.

Request https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg at this time. The effect is as follows: download to an image.jpg of the specified width * height size. There is a directory named width * height in OSS bucket, and there is image.jpg in that directory.

Summary

We have built a real-time on-demand image processing service through FC + OSS, which has the following features:

Real-time processing to reduce storage costs without the need for operation and maintenance data function calculation Function ComputeAliyun Serverless VSCode plug-in Fun

"Alibaba's cloud native technology circle focuses on micro-services, Serverless, containers, Service Mesh and other technology areas, focuses on cloud native popular technology trends, and cloud native large-scale landing practices, so as to be the technology circle that best understands cloud native developers."

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.