Applying image effects (🟢 Beginner)

Applying visual effects in C++ usually means dealing with platform-specific APIs or third-party libraries. With xtd, it’s just a single line—cross-platform, clean, and fast.

Introduction

With xtd::drawing::imaging::image_effector, you can easily apply effects such as grayscale, invert, blur, or sepia.
Effects can be applied to a full image, a selected rectangular portion, or directly on a graphics object, making it versatile for all kinds of graphical applications.

Full image

#include <xtd/xtd>

using namespace xtd::drawing;

auto main() -> int {
  auto img = image::from_file("my_image.png");
  imaging::image_effector::set_effect(img, imaging::effects::grayscale_effect {});
  img.save("my_image_gray.png");
}

// This code applies a grayscale effect to the entire image.

Portion of an image

#include <xtd/xtd>

using namespace xtd::drawing;

auto main() -> int {
  auto img = image::from_file("my_image.png");
  imaging::image_effector::set_effect(img, {10, 10, 100, 100}, imaging::effects::invert_effect {});
  img.save("my_image_partial.png");  
}

// This code inverts colors only in the rectangle (10, 10, 100, 100) of the image.

Directly on a graphics

#include <xtd/xtd>

using namespace xtd::drawing;

auto main() -> int {
  auto f = form {};
  f.paint += [&](paint_event_args& e) {
    auto img = image::from_file("my_image.png");
    imaging::image_effector::set_effect(img, imaging::effects::blur_effect {10});
    e.graphics().draw_image(img, 0 ,0);
  };
  f.show_dialog();
}

// This code applies a blur effect to an image when painting it on a form.

All built-in effects

xtd::drawing::imaging::image_effector provides a wide variety of built-in effects—more than even .NET. Here’s the full list you can use out-of-the-box:

• optional_effect
• blur_effect
• brightness_effect
• color_effect
• color_extraction_effect
• color_substitution_effect
• contrast_effect
• crop_effect
• disabled_effect
• drop_shadow_effect
• gamma_correction_effect
• grayscale_effect
• hue_rotate_effect
• invert_effect
• opacity_effect
• posterize_effect
• resize_effect
• rotate_flip_effect
• saturate_effect
• scale_effect
• sepia_effect
• solarize_effect
• threshold_effect

Tip You can combine multiple effects to create complex visual transformations. Effects can be applied to the entire image, a portion, or directly on a graphics surface, giving you maximum flexibility.

Conclusion

xtd::drawing::imaging::image_effector allows you to apply visual effects in a simple, readable, and cross-platform way. Whether you need to process a full image, a portion, or draw on graphics, xtd provides a unified API without complicated platform-specific code.

Did you know?

• Applying effects directly on a portion of an image is non-destructive if you work on a copy.
• You can chain multiple effects to create complex visual transformations.
• Effects can also be applied in real-time on graphics for interactive applications or games.

To go further

• See the xtd::drawing::imaging::image_effector and Image effects documentation for all available effects.
• Combine effects with other drawing features like overlays, text, or shapes to create rich visuals.
• Experiment with portions, alpha channels, and graphics surfaces for interactive apps.
• Applying effects on a graphics surface allows you to transform visuals dynamically—perfect for animations or games.
• You can also create your own effect. Just create your own_effect class, inherit it from the abstract class xtd::drawing::imaging::effects::effect nd override the pure virtual method void apply(xtd::drawing::image& image) const Creating your own effect lets you go beyond the built-in filters to match your app’s branding, style, or special processing needs.

#include <xtd/xtd>

using namespace xtd::drawing;

class blue_effect : public imaging::effects::effect {
protected:
  void apply(drawing::image& image) const override {
    for (auto y = 0; y < image.height(); ++y)
      for (auto x = 0; x < image.width(); ++x)
        if (image.alpha()[y * image.width() + x] != 0) image.rgb()[(y * image.width() + x) * 3 + 2] = 0xFF;
  }
};

auto main() -> int {
  auto img = image::from_file("my_image.png");
  imaging::image_effector::set_effect(img, blue_effect {});
  img.save("my_image_blue.png");
}

See also

• Tips & Tricks
• Documentation