imgproxy 使用說明
==

# 說明
前端透過 imgproxy的cdn 域名帶入 queryString，透過 cdn 的cloutFront function 取得 運算過後的影像網址
# 官方文件
* [DEMO](https://imgproxy.net/#demo)
* [processing-options ](https://docs.imgproxy.net/generating_the_url?id=processing-options)
若有其他的影像需求，可以再提出，後端會在設定在 cloudFront Function

# 網址設定方式
* host: https://img-dev.storm.mg/cloud
* http method: GET
* quertString
* w：寬度
* h：高度
* resize：調整影像尺寸方式
* fit: resizes the image while keeping aspect ratio to fit a given size.
* fill: resizes the image while keeping aspect ratio to fill a given size and crops projecting parts.
* fill-down: the same as fill, but if the resized image is smaller than the requested size, imgproxy will crop the result to keep the requested aspect ratio.
* force: resizes the image without keeping the aspect ratio.
* auto: if both source and resulting dimensions have the same orientation (portrait or landscape), imgproxy will use fill

* **影像小教室 fill 跟 fit 的差別**
* fill 依據影像中心點去做尺寸轉換
* fit 保留原始尺寸的長寬比
* 參考文件 [Image Aspect Ratio: Fit vs Fill](https://support.beautiful.ai/hc/en-us/articles/360018488832-Image-Aspect-Ratio-Fit-vs-Fill-)
* gravity：中心點設定，resize設定為 fill才需要傳入
* type - specifies the gravity type. Available values:
* no: north (top edge)
* so: south (bottom edge)
* ea: east (right edge)
* we: west (left edge)
* noea: north-east (top-right corner)
* nowe: north-west (top-left corner)
* soea: south-east (bottom-right corner)
* sowe: south-west (bottom-left corner)
* ce: center
~~* (optional) specifies the gravity offset along the X and Y axes.
Default: ce:0:0
* x_offset
* y_offset~~

* url: 圖片來源，限制為 https://image.cache.storm.mg/ 底下

# 測試範例
* url sample: https://img-dev.storm.mg/cloud?w=1200&h=300&resize=fit&url=https://image.cache.storm.mg/styles/smg-600x400-fp/s3/media/image/2021/10/14/20211014-053411_U7131_M163564_f81a.jpeg?itok=uzC99zpj

{
  "version": "1.0",
  "context": {
    "eventType": "viewer-request"
  },
  "viewer": {
    "ip": "1.2.3.4"
  },
  "request": {
    "method": "GET",
    "uri": "/index.html",
    "headers": {},
    "cookies": {},
    "querystring": {
      "w": {
        "value": "800"
      },
      "h": {
        "value": "600"
      },
      "resize": {
        "value": "fit"
      },
      "url": {
        "value": "https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2022/05/13/20220513-065903_U7213_M763636_4121.jpeg?itok=9Zayq7OL"
      },
      "g": {
        "value": "ce"
      },
      "wm_position": {
        "value": "sowe"
      },
      "wm_opacity": {
        "value": "0.9"
      },
      "wm_x": {
        "value": "2"
      },
      "wm_y": {
        "value": "6"
      },
      "wm_ scale": {
        "value": "1"
      },
      "wmu": {
        "value": "https://image.cache.storm.mg/media/image/2022/05/16/20220516-113234_U7176_M163623_ef2d.png"
      }
    }
  }
}