作者：澤塵

簡介

隨著具有不同屏幕尺寸和分辨率設備的爆炸式增長，開發人員經常需要提供各種尺寸的圖像，從而確保良好的用戶體驗。目前比較常見的做法是預先為一份圖像存放多份具有不同尺寸的副本，在前端根據用戶設備的 media 信息來請求特定的圖像副本。

預先為一份圖像存放多份具有不同尺寸副本的行為，經常是通過 阿里云函數計算 FC 以及阿里云對象存儲 OSS 兩大產品實現的。用戶事先為 FC 中的函數設置對象存儲觸發器，當在存儲桶中創建了新對象（即 putObject 行為，此處指在 OSS bucket 中存放了圖像），通過 OSS 觸發器來觸發函數對剛剛存放的圖像進行處理，處理成不同尺寸的副本后，將這些副本存放進 OSS bucket。

上述方法的特點是預先處理，如果要處理的圖像尺寸較多，那么當圖像數量非常大的時候，會占用很多存儲空間。假設要處理的圖像尺寸數目為 x、圖像數量為 y、平均每份圖像的大小為 z，那么要占用的存儲空間為 x y z。

動態調整圖像大小為了避免無用的圖像占用存儲空間，可以使用動態調整圖像大小的方法。在 OSS bucket 中預先只為每份圖像存放一個副本，當前端根據用戶設備的 media 信息來請求特定尺寸圖像副本時，再生成相關圖像。

步驟：

用戶通過瀏覽器請求 OSS bucket 中特定的圖像資源，假設為 800 * 600 的 image.jpg。

OSS bucket 中沒有相關的資源，將該請求重定向至生成特定尺寸圖像副本的 api 地址。

瀏覽器根據重定向規則去請求調整圖像大小的 api 地址。

觸發函數計算的函數來執行相關請求。

函數從 OSS bucket 中下載到原始圖像 image.jpg，根據請求內容生成調整后的圖像，上傳至 OSS bucket 中。

將請求重定向至圖像在 OSS bucket 中的位置。

瀏覽器根據重定向規則去 OSS bucket 中請求調整大小后的圖像。

上述方法的特點是：

即時處理。

降低存儲成本。

無需運維。

實踐

1. 創建并配置 OSS

• 在 OSS 控制臺 中，創建一個新的 Bucket，讀寫權限選擇公共讀 (用于本教程示例，可之后更改)。
  
• 在 Bucket 的基礎設置中，設置鏡像回源。
  • 回源類型：重定向
  • 回源條件：HTTP 狀態碼 404
  • 回源地址：選擇添加前后綴，并在回源域名中填寫一個已接入阿里云備案的自定義域名。
  • 重定向 Code：302

2. 創建 FC 函數

• 下載 serverless-image-on-the-fly 項目到本地

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

• 進入項目目錄，執行 npm install
• 填寫 template.yml 文件中的相關內容：OSSREGION、OSSBUCKET_NAME、自定義域名

ROSTemplateFormatVersion: '2015-09-01' Transform: 'Aliyun::Serverless-2018-04-03' Resources:serverless-image:Type: 'Aliyun::Serverless::Service'Properties:Description: This is serverless-image servicePolicies:- AliyunOSSFullAccessimage-resize:Type: 'Aliyun::Serverless::Function'Properties:Handler: src/index.handlerRuntime: nodejs10Timeout: 60MemorySize: 512CodeUri: ./EnvironmentVariables:OSS_REGION: oss-cn-shanghai # oss region, such as oss-cn-shanghai、oss-cn-hangzhouOSS_BUCKET_NAME: images-xxx # oss bucket nameEvents:httpTrigger:Type: HTTPProperties:AuthType: ANONYMOUSMethods:- GET- POSTwilliam.functioncompute.com: # domain nameType: 'Aliyun::Serverless::CustomDomain'Properties:Protocol: HTTPRouteConfig:routes:'/*':ServiceName: serverless-imageFunctionName: image-resize

• 部署函數至云端
  • 可以通過 Serverless VSCode 插件 部署
  • 可以通過 fun 部署

3. 測試動態調整圖像

• 在 OSS bucket 中上傳一張圖像，假設為 image.jpg 。

• 此時請求 https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg。會有如下效果：
• 下載到指定 width * height 大小的 image.jpg。
• OSS bucket 中有 width * height 命名的目錄，該目錄下有 image.jpg。

總結

我們通過 FC OSS 搭建了一個實時按需圖像處理服務，該服務擁有以下特點：

即時處理

降低存儲成本

無需運維

資料

函數計算 Function Compute

Aliyun Serverless VSCode 插件

Fun

“阿里巴巴云原生技術圈關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦云原生流行技術趨勢、云原生大規模的落地實踐，做最懂云原生開發者的技術圈。”

總結

以上是生活随笔為你收集整理的利用 FC OSS 快速搭建 Serverless 实时按需图像处理服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。