使用函數進行圖片轉換 - Edge Security Acceleration

ESA函數允許使用者在代碼裡fetch某些圖片資源，同時通過添加一些處理參數，直接在ESA上進行圖片處理，同時將處理後的圖片進行緩衝。

功能說明

函數支援的圖片處理方式如下表：

參數	說明
format	轉換圖片格式。
quality	調整圖片品質。
crop	裁剪指定大小的圖片。
resize	將圖片縮放至指定大小。
rotate	將攜帶旋轉參數的圖片進行自適應旋轉或按指定角度以順時針方向旋轉圖片。
colorGrading	調整圖片的亮度、對比和清晰度。
waterMark	為圖片添加圖片浮水印或文字浮水印。
info	擷取圖片資訊，包括圖片的長、寬、高、圖片格式和圖片品質等資訊。

使用方式

格式說明

所有的圖片處理格式如下：

image：表示此次fetch的圖片資源需要進行轉換處理，這是一個Array，使用者可以配置多種處理行為。
action：具體要執行的處理動作。
option：此處理動作需要指明的參數選項。
- mode：部分action有不同的處理模式，此欄位指明需要用哪種模式。
- param：具體需要指定的處理參數。

return fetch(imageUrl, {
  image: [
    {
      action: "xxx",
      option: {
        mode: "xxx",
        param: {
        },
      },
    },
    {
      action: "xxx",
      option: {
        mode: "xxx",
        param: {
        },
      },
    },
  ],
});
}

Format

樣本：格式轉換

async function imageFormat() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "format",
        option: {
          param: {
            f: "png",
          },
        },
      },
    ],
  });
}

action無需指定mode。
param支援的類型。
- f
  - 取值： ["jpeg", "png", "webp", "bmp", "gif", "tiff", "jpeg 2000"] 。
  - 含義：格式轉換。

Quality

樣本：品質轉換

async function imageQuality() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "quality",
        option: {
          param: {
            Q: 5,
          },
        },
      },
    ],
  });
}

action無需指定mode。
param支援的類型。
- Q
  - 取值：0<Q<100且Q必須是5的倍數，不在品質值範圍內的其他值均不支援。
  - 含義：品質轉換。
- q
  - 取值： 0<q<100且q必須是5的倍數，不在品質值範圍內的其他值均不支援。
  - 含義：品質轉換。

Crop

樣本1：圓切

async function imageCrop() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "crop",
        option: {
          mode: "circle",
          param: {
            r: 100,
          },
        },
      },
    ],
  });
}

樣本2：置中切

async function imageCrop() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "crop",
        option: {
          mode: "mid",
          param: {
            w: 400,
            h: 200,
          },
        },
      },
    ],
  });
}

action需要指定mode，各mode支援param參數如下，可參考：圖片剪裁。支援mode類型如下：
- circle：圓切。
- sudoku：九宮格切。
- coordinate：指定X、Y軸剪下。
- mid：圖片置中剪下。
circle
- r或者R
  - 取值：大於0整數。
  - 含義：指定圓切半徑。
sudoku
- g
  - 取值：["nw", "north", "ne", "west", "center", "east", "sw", "south", "se"]
  - 含義：對應九宮格九個位置。
- w
  - 取值： min: 0 max: 16777216
  - 含義：指定切割寬度。
- h
  - 取值： min: 0 max: 16777216
  - 含義：指定切割高度。
coordinate
- x
  - 取值： min: 0 max: 16777216
  - 含義：指定切割起點x座標。
- y
  - 取值： min: 0 max: 16777216
  - 含義：指定切割起點y座標。
- w
  - 取值： min: 0 max: 16777216
  - 含義：指定切割寬度。
- h
  - 取值： min: 0 max: 16777216
  - 含義：指定切割高度。
mid
- w
  - 取值： min: 0 max: 16777216
  - 含義：指定切割寬度。
- h
  - 取值： min: 0 max: 16777216
  - 含義：指定切割高度。

Rotate

樣本1：自訂旋轉

async function imageRotate() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "rotate",
        option: {
          mode: "custom",
          param: {
            a: 180,
          },
        },
      },
    ],
  });
}

樣本2：自動旋轉

async function imageRotate() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "rotate",
        option: {
          mode: "auto",
          param: {
          },
        },
      },
    ],
  });
}

action需要指定mode，各mode支援param參數如下，可參考：圖片旋轉。支援mode類型如下：
- custom：自訂旋轉。
- auto: 自動旋轉。
custom
- a或者A
  - 取值：90 180 270
  - 含義：指定旋轉角度。
auto：自動旋轉，無需指定參數。

Resize

樣本：自訂縮放

async function imageResize() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "resize",
        option: {
          mode: "custom",
          param: {
            p: 90,
            // s: 200,
            // l: 200,
            // w: 200,
            // h: 200,
            fw: 200,
            // fh: 200,
          },
        },
      },
    ],
  });
}

action目前只支援一種mode，預設寫custom即可。支援param參數如下：
custom
- l s w h fw fh
  - 取值：min: 0 max: 16777216
  - 含義：圖片縮放
- p
  - 取值：min: 0 max: 100
  - 含義：圖片縮放

ColorGrading

樣本：調整圖片的亮度、對比、銳利化效果。

async function imageColorGrading() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "colorGrading",
        option: {
          param: {
            b: -100,
            c: 10,
            s: 50,
          },
        },
      },
    ],
  });
}

action無需指定mode，支援param參數如下，可參考：圖片色彩。
b
- 取值：min: -100 max: 100
- 含義：指定圖片的亮度。
c
- 取值：min: -100 max: 100
- 含義：指定圖片的對比。
s
- 取值：min: 50 max: 399
- 含義：設定圖片銳利化效果的強度。

waterMark

樣本：文字浮水印 + 圖片浮水印

async function imageWaterMark() {
  return fetch(imageUrl1, {
    image: [
      {
        action: "waterMark",
        option: {
          mode: "text",
          param: {
            text: "bW9jaGVuIHRlc3Q",
            x: 10,
            y: 10,
            rotate: 100,
          },
        },
      },

      {
        action: "waterMark",
        option: {
          mode: "image",
          param: {
            image:
              "aHR0cHM6Ly9jZG4yLmljb25maW5kZXIuY29tL2RhdGEvaWNvbnMvc29jaWFsLW1lZGlhLTIxODkvNDgvMTMtT3BlcmEtMTI4LnBuZw",
            g: 3,
          },
        },
      },
    ],
  });
}