SupImage

The SupImage object represents an image in Sup. It can be created from either a URL or a Blob.

Example Image

SupImage: {
  "url": "https://user-uploads.cdn.overworld.xyz/cumnehs74u2bfcas8gxsdzqx.webp",
  "filename": "riffbit.webp",
  "width": 256,
  "height": 256
}

---

Properties

name

type: string | undefined

The original filename of the image, if available.

width

type: number | undefined

The width of the image in pixels.

height

type: number | undefined

The height of the image in pixels.

url

type: string

Gets the CDN URL for the image. If the image was created from a Blob, the Blob will be automatically uploaded and a URL will be generated.

blob

type: Blob

Gets the image data as a Blob. If the image was created from a URL, the image will be downloaded and returned as a Blob.

Output

Returning an Image from a patch’s main() function will display the image in the chat.

function main() {
  return sup.image(
    "https://user-uploads.cdn.overworld.xyz/cumnehs74u2bfcas8gxsdzqx.webp"
  );
}

---

Editing

Use the edit() method to modify an Image. This returns an editing cursor that supports transformations and effects. After editing, call render() to get the final result.

function main() {
  const image = sup.input.image;
  if (!image) return "Please attach an image";

  const cursor = image.edit();

  // Resize
  cursor.resize(800, 600, { mode: "contain" }); // Other modes: cover, fill, inside, outside
  cursor.resize(64, 64, { pixelated: true }); // Nearest-neighbor scaling for pixel art

  // Basic transformations
  cursor.crop(0, 0, 400, 300);
  cursor.rotate(90);
  cursor.flip(true, false); // Flip horizontally or vertically

  // Effects
  cursor.grayscale();
  cursor.blur(2.5);
  cursor.sharpen(1.5);
  cursor.invert();

  return cursor.render();
}

Basic transformations

• resize(width: number, height: number, opts?: { mode?: "cover" | "contain" | "fill" | "inside" | "outside", pixelated?: boolean }) Resizes the image. Set pixelated: true for nearest-neighbor scaling (useful for pixel art).
• crop(top: number, left: number, bottom: number, right: number)
  Crops the image.
• rotate(degrees: number)
  Rotates the image.
• flip(horizontal: boolean, vertical: boolean)
  Flips the image (set horizontal or vertical to true).
• flop()
  Flips the image horizontally.

Effects

• grayscale() Converts the image to grayscale.
• invert() Inverts the colors of the image.
• blur(sigma: number) Applies Gaussian blur.
• sharpen(sigma: number) Sharpens the image.
• mask(mask: Image) Applies a mask to create transparency.

Compositing

• composite(...layers: Image[], options?: { top?: number, left?: number }[])
  Overlays multiple images on top of the current one. You can specify the position of each layer using the options parameter.

For image compositing, layer multiple images together:

function main() {
  const background = sup.input.image;
  const overlay = sup.image("overlay.png");     // overlay.png is uploaded as an asset

  const cursor = background.edit();
  cursor.composite(overlay);

  return cursor.render();
}