Home Components Support Pricing About Log in

Image editor

BptImageEditor

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.

Image Editor Parameters

Current Configuration

📋

<BptImageEditor
    Width="100%"
    Height="80vh"
    OnExport="HandleExport"
    OnSave="HandleOnSave" />

@code {
@using Bpt.Components.Tools

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

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

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.