使用边缘函数进行图片转换_边缘安全加速(ESA)-阿里云帮助中心

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,
          },
        },
      },
    ],
  });
}