Add Filter
Use composition.addFilter() to add filters to a composition.
composition.addFilter() signature
addFilter(
options:FilterOptions
): Promise<Filter>
Options
| Property | Type | Default | Description |
|---|
name | string | null | A required string containing one of the supported filters |
options | object | null | An optional object used to configure one of the configurable filters. Only use this argument if you are adding a configurable filter. |
Filter class
Calling composition.addFilter() returns an instance of the Filter class, which allows you to read/update its layer optionsthrough getters/setters.
Reading and updating layer options
filter.type;
filter.setFilter({ name: 'brightness', options: { brightness: 1.1 })
filter.name;
filter.options;
Examples
await composition.addVideo(
"https://editframe.com/docs/layer-types/add-filter/puppy-beach.mp4"
);
composition.addFilter({ name: "grayscale" });
composition.addFilter({ name: "brightness", options: { brightness: 0.5 } });
Output
Supported Filters
The following filters are currently supported:
| Filter name | Configurable |
|---|
brightness | ✓️ |
contrast | ✓ |
fadein | ✓ |
fadeout | ✓ |
grayscale | |
lighten | |
negative | |
saturation | ✓ |
sobel | |
vintage | |
Configurable Filter Options
brightness options
| Option | Type | Description |
|---|
brightness | number | A number between -1 and 1 |
Example
composition.addFilter({ name: "brightness", options: { brightness: 0.5 } });
Output
contrast options
| Option | Type | Description |
|---|
contrast | number | A number between -1000 and 1000 |
Example
composition.addFilter({ name: "contrast", options: { contrast: 42 } });
Output
fadein options
| Option | Type | Description |
|---|
color | string | Any hexadecimal, rgb, or named color |
duration | number | Fade length in seconds |
startTime | number | The time in the composition, in seconds, at which to start the fade |
Example
composition.addFilter({
name: "fadein",
options: {
color: "#2f2649",
duration: 2,
startTime: 0,
},
});
Output
fadeout options
| Option | Type | Description |
|---|
color | string | Any hexadecimal, rgb, or named color |
duration | number | Fade length in seconds |
startTime | number | The time in the composition, in seconds, at which to start the fade |
Example
composition.addFilter({
name: "fadeout",
options: {
color: "#2f2649",
duration: 2,
startTime: 0,
},
});
Output
saturation options
| Option | Type | Description |
|---|
saturation | number | A number between 0 and 3 |
Example
composition.addFilter({
name: "saturation",
options: {
saturation: 2,
},
});
Output