VivekG.SkiaImageEditor.Maui.v1 1.0.0

VivekG.SkiaImageEditor.Maui

The Best Open-Source MAUI Image Editor on Earth 🌟

A professional, Instagram/Canva-style image editor for .NET MAUI built with SkiaSharp. Features include shapes, text overlays, drawing, cropping, rotation, filters, and more - all with high performance and a beautiful UI.

✨ Features

• 🎨 Drawing Tools - Freehand drawing with customizable brush sizes and colors
• 📐 Shapes - Add rectangles, circles, lines, arrows, and more
• ✍️ Text Overlays - Add and style text with multiple fonts, colors, and styles
• ✂️ Crop & Transform - Crop with aspect ratios, rotate, flip, and more
• 🎭 Filters - Apply various image filters
• ↶ Undo/Redo - Full undo/redo support (up to 30 steps)
• 💾 Save to Gallery - Automatically saves edited images to device gallery
• 🎯 Touch-Optimized - Smooth touch interactions for all editing tools
• 🌙 Dark Theme - Beautiful dark UI that matches modern design standards

📦 Installation

Install the package via NuGet:

dotnet add package VivekG.SkiaImageEditor.Maui --version 1.0.0

Or via Package Manager:

Install-Package VivekG.SkiaImageEditor.Maui -Version 1.0.0

🚀 Quick Start

Option 1: Using the Service (Recommended)

The easiest way to use the editor is through the SkiaImageEditorService:

using VivekG.SkiaImageEditor.Maui;

// In your page or view model
var imageEditorService = new SkiaImageEditorService();

// Edit an image from file path
var editedPath = await imageEditorService.EditImageAsync("/path/to/image.jpg");

if (editedPath != null)
{
    // Image was saved successfully
    Console.WriteLine($"Image saved to: {editedPath}");
    // Display the edited image
}
else
{
    // User cancelled editing
    Console.WriteLine("Editing was cancelled");
}

// Or edit from a stream
using var stream = File.OpenRead("/path/to/image.jpg");
var editedPathFromStream = await imageEditorService.EditImageFromStreamAsync(stream);

// Or edit from byte array
byte[] imageBytes = File.ReadAllBytes("/path/to/image.jpg");
var editedPathFromBytes = await imageEditorService.EditImageFromBytesAsync(imageBytes);

Option 2: Direct Page Usage

You can also use the editor page directly:

using VivekG.SkiaImageEditor.Maui;

var editorPage = new SkiaSharpImageEditorPage();
editorPage.SetImageSource("/path/to/image.jpg");

// Subscribe to save event
editorPage.OnImageSaved = (savedPath) =>
{
    Console.WriteLine($"Image saved to: {savedPath}");
};

// Subscribe to cancellation event
editorPage.ImageCancelled += (s, e) =>
{
    Console.WriteLine("Editing was cancelled");
};

await Navigation.PushAsync(editorPage);

📱 Platform Support

• ✅ Android (API 21+)
• ✅ iOS (15.0+)
• ✅ macOS (Catalyst 15.0+)
• ✅ Windows (10.0.17763.0+)

🎯 Usage Examples

Basic Image Editing

public class MyPage : ContentPage
{
    private readonly SkiaImageEditorService _imageEditorService;

    public MyPage()
    {
        _imageEditorService = new SkiaImageEditorService();
    }

    private async void OnEditImageClicked(object sender, EventArgs e)
    {
        // Pick an image from the device
        var photo = await MediaPicker.PickPhotoAsync();
        if (photo != null)
        {
            // Edit the image
            var editedPath = await _imageEditorService.EditImageAsync(photo.FullPath);
            
            if (editedPath != null)
            {
                // Display the edited image
                MyImage.Source = ImageSource.FromFile(editedPath);
            }
        }
    }
}

Using Dependency Injection

// In MauiProgram.cs
builder.Services.AddSingleton<SkiaImageEditorService>();

// In your view model or page
public class MyViewModel
{
    private readonly SkiaImageEditorService _imageEditorService;

    public MyViewModel(SkiaImageEditorService imageEditorService)
    {
        _imageEditorService = imageEditorService;
    }

    public async Task EditImageAsync(string imagePath)
    {
        var result = await _imageEditorService.EditImageAsync(imagePath);
        // Handle result...
    }
}

🛠️ Advanced Features

Custom Image Source

var editorPage = new SkiaSharpImageEditorPage();
editorPage.SetImageSource("/path/to/image.jpg");

Get Edited Image as Bytes

var editorPage = new SkiaSharpImageEditorPage();
editorPage.SetImageSource("/path/to/image.jpg");

// After editing, get the result as bytes
var bytes = viewModel.GetEditedImageAsBytes();

Get Edited Image as Stream

var stream = viewModel.GetEditedImageAsStream();

🎨 Editor Features

Drawing

• Adjustable brush size
• Multiple color options
• Smooth stroke rendering

Shapes

• Rectangle
• Circle
• Line
• Single Arrow
• Double Arrow
• Dotted Line
• Customizable fill and stroke colors

Text

• Multiple font families
• Bold, Italic, Underline styles
• Customizable text color
• Background fill color support
• Drag to reposition

Crop

• Free crop
• Aspect ratio presets (1:1, 4:3, 16:9, etc.)
• Circle and square crop modes
• Rotate and flip tools

📋 Requirements

• .NET 8.0 or later
• .NET MAUI workload installed
• Visual Studio 2022 17.8+ or VS Code with C# Dev Kit

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with:

• SkiaSharp - 2D graphics API
• CommunityToolkit.Mvvm - MVVM helpers
• .NET MAUI - Cross-platform framework

📞 Support

• GitHub Issues: Report a bug or request a feature
• Repository: https://github.com/vivekjoy/VivekG.SkiaImageEditor.Maui

⭐ Show Your Support

If you find this library useful, please give it a star on GitHub!

Made with ❤️ by Vivek G