Image editor

IsabyteImageEditor

A browser-based image editor inspired by desktop design tools. Features drawing tools (pencil, shapes, text), multi-layer support with blend modes, image adjustments (brightness/contrast, color balance, hue/saturation, invert, grayscale), undo/redo, crop, pan/zoom, and export to PNG, JPEG, WebP, or SVG. Supports image analysis (Sobel, Canny, Contour, Skeleton), web component mockups, and a BannerEditor mode for multi-format ad banner templates.

Current Configuration
📋
<IsabyteImageEditor
    Width="100%"
    Height="80vh"
    BannerTemplateFormats="@_customFormats"
    BannerTemplateFormatsMode="BannerFormatsMode.AddToDefaults"
    OnExport="HandleExport"
    OnFullscreenChange="HandleFullscreenChange"
    OnNotice="HandleNotice"
    OnAiRequest="HandleAiRequest"
    OnSave="HandleOnSave" />

@code {
@using Isabyte.PowerTools.Components.Tools

// Fields
private string _width = "100%";
private string _height = "80vh";
private bool _enableLayers = true;
private bool _enableAdjustments = true;

// Custom banner formats
private List<BannerFormatPreset> _customFormats = new()
{
    new() { Name = "Company Badge", Width = 400, Height = 400, Category = BannerCategory.Custom },
    new() { Name = "Email Signature", Width = 600, Height = 200, Category = BannerCategory.Custom },
    new() { Name = "Event Ticket", Width = 1200, Height = 500, Category = BannerCategory.Custom },
};

// Event handlers
private void HandleExport(ImageEditorExportResult result)
{
    // result.Data, result.MimeType, result.Format, result.Width, result.Height
}

private void HandleFullscreenChange(bool fullscreen) { }

private void HandleNotice(ImageEditorNotice notice)
{
    // notice.Kind ("warning"), notice.Message
}

private void HandleAiRequest(ImageEditorAiRequest request)
{
    // request.Prompt, request.Images (PNG data URLs), request.LayerContextMode, request.ResultTarget
}

private void HandleOnSave(ImageEditorSaveResult result)
{
    // result.Data, result.FileName, result.FileId, result.IsNew, result.FileExtension
}
}
Related learning

See the Banner Creation tutorial for a step-by-step walkthrough.

An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.