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

Width

Height

Editor Mode

Save Behaviour

Layers

Image Adjustments

Full Screen

Enable New

Enable Import

Enable Export

Enable Save

Enable Load

Custom Banner Formats

Image Library

▸ Enabled Tools (leave all unchecked = all enabled)

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
}
}