作者：澤塵

創(chuàng)新互聯(lián)建站：從2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為數(shù)千家公司企業(yè)提供了專業(yè)的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 定制開發(fā)由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

簡介

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

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

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

動態(tài)調(diào)整圖像大小
為了避免無用的圖像占用存儲空間，可以使用動態(tài)調(diào)整圖像大小的方法。在 OSS bucket 中預(yù)先只為每份圖像存放一個副本，當(dāng)前端根據(jù)用戶設(shè)備的 media 信息來請求特定尺寸圖像副本時，再生成相關(guān)圖像。

步驟：

1. 用戶通過瀏覽器請求 OSS bucket 中特定的圖像資源，假設(shè)為 800 * 600 的 image.jpg。
2. OSS bucket 中沒有相關(guān)的資源，將該請求重定向至生成特定尺寸圖像副本的 api 地址。
3. 瀏覽器根據(jù)重定向規(guī)則去請求調(diào)整圖像大小的 api 地址。
4. 觸發(fā)函數(shù)計(jì)算的函數(shù)來執(zhí)行相關(guān)請求。
5. 函數(shù)從 OSS bucket 中下載到原始圖像 image.jpg，根據(jù)請求內(nèi)容生成調(diào)整后的圖像，上傳至 OSS bucket 中。
6. 將請求重定向至圖像在 OSS bucket 中的位置。
7. 瀏覽器根據(jù)重定向規(guī)則去 OSS bucket 中請求調(diào)整大小后的圖像。

上述方法的特點(diǎn)是：

1. 即時處理。
2. 降低存儲成本。
3. 無需運(yùn)維。

實(shí)踐

1. 創(chuàng)建并配置 OSS

• 在 OSS 控制臺 中，創(chuàng)建一個新的 Bucket，讀寫權(quán)限選擇公共讀 (用于本教程示例，可之后更改)。
  

• 在 Bucket 的基礎(chǔ)設(shè)置中，設(shè)置鏡像回源。
  • 回源類型：重定向
  • 回源條件：HTTP 狀態(tài)碼 404
  • 回源地址：選擇添加前后綴，并在回源域名中填寫一個已接入阿里云備案的自定義域名。
  • 重定向 Code：302

2. 創(chuàng)建 FC 函數(shù)

• 下載 serverless-image-on-the-fly 項(xiàng)目到本地

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

• 進(jìn)入項(xiàng)目目錄，執(zhí)行 npm install
• 填寫 template.yml 文件中的相關(guān)內(nèi)容：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

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

3. 測試動態(tài)調(diào)整圖像

• 在 OSS bucket 中上傳一張圖像，假設(shè)為 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。

總結(jié)

我們通過 FC + OSS 搭建了一個實(shí)時按需圖像處理服務(wù)，該服務(wù)擁有以下特點(diǎn)：

1. 即時處理
2. 降低存儲成本
3. 無需運(yùn)維

資料

1. 函數(shù)計(jì)算 Function Compute
2. Aliyun Serverless VSCode 插件
3. Fun

“阿里巴巴云原生技術(shù)圈關(guān)注微服務(wù)、Serverless、容器、Service Mesh 等技術(shù)領(lǐng)域、聚焦云原生流行技術(shù)趨勢、云原生大規(guī)模的落地實(shí)踐，做最懂云原生開發(fā)者的技術(shù)圈?！?/p>