This page is still a work in progress.

Canvacord’s image manipulation API works by allowing you to define how image should be processed by using a schema object. The schema object is a JavaScript object that defines the image manipulation process. This schema can generate both static as well as animated images.

Example

Check out Stewie Griffin example to see how you can create your own image manipulation function.

Usage

Structure

export interface ImageGenerationStep {
  /**
   * The image to render.
   */
  image?: ImgenStep[];
  /**
   * The text to render.
   */
  text?: TextGenerationStep[];
  /**
   * The custom steps to apply to the canvas.
   */
  custom?: CustomGenerationStep[];
  /**
   * The function to call before processing this step.
   */
  preprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    step: ImageGenerationStep
  ) => Awaited<void>;
  /**
   * The function to call when processing this step.
   */
  process?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    step: ImageGenerationStep
  ) => Awaited<void>;
  /**
   * The function to call after processing has finished.
   */
  postprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    step: ImageGenerationStep
  ) => Awaited<void>;
}

export interface CustomGenerationStep {
  /**
   * The function to call when processing this step.
   */
  process: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    step: ImageGenerationStep
  ) => Awaited<void>;
}

export interface ImgenStep {
  /**
   * The image to render.
   */
  source: TemplateImage;
  /**
   * The x position of the image.
   */
  x: number;
  /**
   * The y position of the image.
   */
  y: number;
  /**
   * The width of the image.
   */
  width?: number;
  /**
   * The height of the image.
   */
  height?: number;
  /**
   * The function to call before processing this step.
   */
  preprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    source: ImgenStep
  ) => Awaited<void>;
  /**
   * The function to call when processing this step.
   */
  process?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    source: ImgenStep
  ) => Awaited<void>;
  /**
   * The function to call after processing has finished.
   */
  postprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    source: ImgenStep
  ) => Awaited<void>;
}

export interface TextGenerationStep {
  /**
   * The text to render.
   */
  value: string;
  /**
   * The font of the text.
   */
  font: string;
  /**
   * The color of the text.
   */
  color: string;
  /**
   * Whether to stroke the text.
   */
  stroke?: boolean;
  /**
   * The x position of the text.
   */
  x: number;
  /**
   * The y position of the text.
   */
  y: number;
  /**
   * The maximum width of the text.
   */
  maxWidth?: number;
  /**
   * The line height of the text.
   */
  lineHeight?: number;
  /**
   * The line width of the text.
   */
  lineWidth?: number;
  /**
   * The alignment of the text.
   */
  align?: "left" | "center" | "right";
  /**
   * The baseline of the text.
   */
  baseline?: "top" | "middle" | "bottom";
  /**
   * The directionality of the text.
   */
  direction?: "inherit" | "ltr" | "rtl";
  /**
   * The function to call before processing this step.
   */
  preprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    text: TextGenerationStep
  ) => Awaited<void>;
  /**
   * The function to call when processing this step.
   */
  process?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    text: TextGenerationStep
  ) => Awaited<void>;
  /**
   * The function to call after processing has finished.
   */
  postprocess?: (
    canvas: Canvas,
    ctx: SKRSContext2D,
    text: TextGenerationStep
  ) => Awaited<void>;
}

/**
 * The template to use for image generation.
 */
export interface IImageGenerationTemplate {
  /**
   * The width of the template.
   */
  width?: number;
  /**
   * The height of the template.
   */
  height?: number;
  /**
   * The steps to apply to the canvas.
   */
  steps: ImageGenerationStep[];
  /**
   * The gif options.
   */
  gif?: EncoderOptions;
}