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