線上動態縮圖模組

過去服務於旅遊電商,商品/旅遊圖片的管理很重要,但要做到前端呈現時,要考量各版型中圖片尺寸都有不同的規則,過去做法在使用者上傳圖片後,依需求規則去產生各種尺寸並壓縮,現在網站都要求符合RWD,所以過去的做法應該已無法再支持下去了,要縮的規則太多,地端檔案也越來越多,這不是好現象。
目前有廠商提供圖片管理的服務,你只要圖片上傳到對方平台(當然他也有提供 API 串接服務),您再透過 URl 的參數動態產生出你需要的尺寸,依使用的量來跟你收費。

前陣子在網路上找到有人使用 nodejs 使用 imagemagick 做到縮圖功能 ( gm ),當然 imagemagick 提供了很多參數讓你調整圖片,而我想透過這個模式,提供線上動態縮圖的功能,再搭配 Aws CDN or GCP CDN ,我也能做到上面二家廠商提供的服務了。
當然我真的做到了,我會先把你要縮的圖透過 request 去抓回來,存在 temp folder,再依你需要的尺寸做縮圖並存在另一個 temp folder,所以每當新的需求進來時我們先檢查是不是有縮圖過,若沒有那麼原圖我有沒有抓過,最後才是縮圖或出圖,某一方面已有先做了簡易的 Cache 在 temp folder。

流程大致如下圖:

查看:Image Cache
使用方式,就看Github 上我寫說明內容吧,大家若有任何問題也請不吝提出。

Related Posts

發佈留言