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
);