Transform images with Edge Functions

Transformation structure

All transformation requests use this structure:

• image: An Array of transformation actions to apply to the fetched image.

• action: The transformation to perform.

• option: Configuration for this action.

  • mode: The processing mode. Some actions support multiple modes.

  • param: The processing parameters.

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

Format

Example: Convert image format

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

• No mode required for this action.

• Supported types for param.

  • f

    • Value: ["jpeg", "png", "webp", "bmp", "gif", "tiff", "jpeg 2000"] .

    • Description: Convert image formats.

Quality

Example: Adjust image quality

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

• No mode required for this action.

• Supported types for param.

  • Q

    • Value: 0 < Q < 100. Must be a multiple of 5.

    • Description: Adjust image quality.

  • q

    • Value: 0 < q < 100. Must be a multiple of 5.

    • Description: Adjust image quality.

Crop

Example 1: Circle crop

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

Example 2: Centered crop

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

• This action requires a mode. Each mode supports different param parameters. Image crop. Supported mode types:

  • circle: Circular crop.

  • sudoku: 3x3 grid slicing.

  • coordinate: Specifies clipping by X and Y coordinates.

  • mid: Crops from the center.

• circle

  • r or R

    • Valid values: An integer greater than 0.

    • Description: Specifies the radius for the circle crop.

• sudoku

  • g

    • Valid values: ["nw", "north", "ne", "west", "center", "east", "sw", "south", "se"]

    • Description: Specifies one of the nine regions of a 3x3 grid.

  • w

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the width of the crop.

  • h

    • Value range: min: 0 max: 16777216

    • Description: Specifies the height of the crop.

• coordinate

  • x

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the X coordinate for the top-left corner of the crop area.

  • y

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the Y coordinate for the top-left corner of the crop area.

  • w

    • Value range: min: 0 max: 16777216

    • Description: Specifies the width of the crop.

  • h

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the height of the crop.

• mid

  • w

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the width of the crop.

  • h

    • Valid values: min: 0 max: 16777216

    • Description: Specifies the height of the crop.

Rotate

Example 1: Customized rotation

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

Example 2: Automatic rotation

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

• This action requires a mode. Each mode supports different param parameters. Image rotation. Supported mode types:

  • custom: Custom rotation.

  • auto: Automatic rotation.

• custom

  • a or A

    • Valid values: 90 180 270

    • Description: Specifies the clockwise rotation angle in degrees.

• auto: Automatic rotation. No parameters are required.

Resize

Example: Custom 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 supports only the custom mode. Supported param parameters:

• custom

  • l s w h fw fh

    • Valid values: min: 0 max: 16777216

    • Description: Resize images

  • p

    • Valid values: min: 0 max: 100

    • Description: Resize images

Color grading

Example: Adjust image brightness, contrast, and sharpness.

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

• No mode required for this action. Supported param parameters (Image Color):

• b

  • Value: min: -100 max: 100

  • Description: Specifies the image brightness.

• c

  • Valid values: min: -100 max: 100

  • Description: Specifies the image contrast.

• s

  • Value: min: 50 max: 399

  • Description: Sets the intensity of the sharpness effect.

Watermark

Example: Add text and image watermarks

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