GitHub

Layer types

Add Image

Use composition.addImage() to add an image to a composition.

composition.addImage() signature

addImage(
  file:CompositionFile,
  config?:ImageLayerConfig
): Promise<Image>

Image layer configuration

The config argument supports the following layer configuration properties:

Info

Unlike an audio or video file, images have no inherent duration. Therefore, Image layers default to having the full duration of the overall composition.

If you want to reduce the duration of your Image Layer, use the Trim layer configuration.

Image class

Calling composition.addImage() returns an instance of the Image class, which allows you to read its layer options and read/update its layer configuration through getters/setters.

Reading layer options

image.type; // "image"

Examples

Minimal

await composition.addImage(
  "https://editframe.com/docs/layer-types/add-image/cyber-feathers.jpg"
);

Output

All layer configuration

await composition.addImage(
  // file
  "https://editframe.com/docs/layer-types/add-image/cyber-feathers.jpg",
  // config
  {
    position: {
      x: "center",
      y: "center",
    },
    size: {
      height: 500,
      width: 1000,
    },
    timeline: {
      start: 1,
    },
    trim: {
      start: 0,
      end: 5,
    },
  }
);

Output

Method Chaining Approach

const image = await composition.addImage(
  "https://editframe.com/docs/layer-types/add-image/cyber-feathers.jpg",
);


image
  // Position
  .setX("center")
  .setY("center")
  // Size
  .setHeight(500)
  .setWidth(1000)
  // Timeline
  .setStart(1)
  // Trim
  .setTrim(
    // start
    0,
    // end
    4
  );

Output

Previous
Add HTML