How to apply an Effect

Enhance your images by applying various effects using the Picsart TypeScript SDK. This guide provides a clear example of using the effect method to add predefined filters to your images. Learn how to retrieve the URL of the modified image and explore the available effects dynamically. With step-by-step instructions and practical code examples, you can easily integrate and utilize image effects in your projects, boosting your image processing capabilities.

Before you start

Check these out before you start

Apply Effect on an Image

In Getting Started with TypeScript SDK you have already learned how to create your image source. Now, you can apply various effects on that image using the effect service.

Here’s how to enhance your images with predefined filters:

const result = await imageApi.effect(  
    new EffectRequest()  
      .setImage(imageSource)  
      .setEffectName(EffectName.a1972)  
);

In this example, the effect named a1972 is applied to the image.

To discover all available parameters for the upscale service, any additional limitations or details,

Use IDE autocompletions
Use the Effects API Reference
Use the repository code

Handling the result

After the effect is applied, you can retrieve the URL of the modified image:

console.log(result.image.url); // The URL of the image with the applied effect

Retrieving Available Effects

To enhance your image editing capabilities, you may want to see which effects are available for use. The API provides a method to retrieve the list of all effects. Here’s how to do that:

const result = await imageApi.getEffects();  
console.log(result.effects); // Array of available effects

This call will return an array of available effects, allowing you to dynamically choose which effects to apply to your images.

What's next:

See other operations you can perform on an image:

For more examples, check out the TypeScript SDK Repository.