如何透過 AWS Lambda 處理圖片？（1）- How to modify image with AWS Lambda ?（1）

既然 AWS Lambda 這麼方便，能否用它來處理圖片呢？重要的是很便宜。

5 min readJul 23, 2021

｜閱讀目錄

（您在這裡）如何透過 AWS Lambda 處理圖片？（1）- How to modify image with AWS Lambda ?（1）
如何透過 AWS Lambda 處理圖片？（2）- How to modify image with AWS Lambda ?（2）

｜動機與結論

在 SWAP 中需要大量計算、製圖、非同步等運算都是被抽到其他伺服器執行，但這樣一來也增加了不少伺服器成本，後來想了想也許 AWS Lambda 可以解決成本與平行運算穩定性問題，於是展開著手研究，中途不像原本想像的容易，遇上各種曲折，慢慢解決了問題後，成功達到需求。

但最後還是只能停擺，宣告無法使用

雖然不繼續使用，但還是來一步一步紀錄是如何完成這個功能。

｜開發環境

Nodejs 12.x.x

｜要做的事情與流程

前端上傳指定圖片
透過 AWS Gateway 呼叫到 AWS Lambda
AWS Lambda 接收到圖片
執行 node-canvas 製圖
完成製圖轉為 base64 並儲存

｜與伺服器很不一樣的無伺服器運算服務

無伺服器運算服務每收到請求或特定觸發事件後才會啟動一次，平時沒事時是保持待機不做任何事情甚至關掉的狀態，所以並不像通常的伺服器程式執行後可以不斷保持著運行狀態，所以原本習慣的那套伺服器處理方式就不管用了。

｜處理上傳圖片

平時用習慣了 Nodejs 的伺服器上傳，第一印象就是使用 express 搭配上傳套件 multer middleware 是最快的。

但在 AWS Lambda 就不一樣了，因為沒辦法執行一個長時間的伺服器運行，也因此無法使用 express，那就更不用說使用 express 的 middleware 了～

AWS Lambda 本身就是一個直接發出請求後就拿到請求封包內容的方法，因此也就只能試試能不能傳送圖片內容給 AWS Lambda 了。

如何讓 AWS Lambda 接收圖片內容

如果大家熟悉從網頁上傳圖片，如果是透過

來進行，通常免不了是使用 multipart/form-data 來進行，而這個標準就是便利於同時有各種不同類型的內容要發送時，可以一次包含很多資訊。

｜建立 AWS Lambda function

省略詳細步驟

｜建立 AWS API Gateway 且接收 multipart/form-data

API Gateway 接收到請求時，允許手動設定接收到的 Content-Type 與 Accept，所以需要先到 API Gateway > API > Settings > Binary Media Types 中設定要辨識的 Content-Type 類型，並自動轉為特定的 body 內容

You can configure binary support for your API by specifying which media types should be treated as binary types. API Gateway will look at the Content-Type and Accept HTTP headers to decide how to handle the body.

API Gateway > API > Settings

Add Binary Media Type 增加 multipart/form-data

｜設定特定 Resources Method 請求內容步驟

先建立一個 POST Method

點擊 POST > Integration Request

增加 Mapping Templates

$input.body 是一個 template 標籤，透過 $input 可以取得請求 body 內容

完成後記得要 deploy 部署產生 API endpoint

｜套用 AWS API Gateway 至 AWS Lambda 中

完成了 AWS API Geteway 的設定後，就可以在 AWS Lambda 將 Trigger 設定為 AWS API Gateway

｜嘗試發送請求至 AWS Lambda

透過基本簡單的 axios 套件發送請求，程式碼如下

｜從 AWS CloudWatch 查看請求 body 內容

得到請求 body 內容後，得知是 bae64 的標準，如果要處理圖片就必須要再轉為 binary code 才行

以上轉換可以得到

<Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 76 70 76 35 66 66 62 76 6e 46 50 73 70 59 45 4f 0d 0a 43 6f 6e 74 65 6e 74 2d ... 4291 more bytes>

轉換完成後，為了檢查內容可以嘗試將 binary code 再試圖轉換成看得懂的內容

得到的內容為

可以看到內容有許多密密麻麻看不懂的字眼，可以預期是圖片的編碼。

｜解決編碼處理圖片問題

下一篇文章：如何透過 AWS Lambda 處理圖片？（2）- How to modify image by AWS Lambda ?（2）