Image Editor component for Blazor

An image editor component for Blazor WebAssembly and Blazor Server with .NET 10. Crop, rotate, flip and scale a picture in the browser, and hand the result back to your own code.

The editor is built on Cropper.js version 2.x, which ships inside the package: nothing is fetched from a CDN at runtime, so the component works on a machine that has never been online and adds nothing to your build.

For more documentation and help with this component, visit the post I created here.

If you like this project and want to support my work, you can buy me a coffee or make a donation. Your support is really appreciated and it helps me to continue to create new projects and to maintain the existing ones.

Install

dotnet add package PSC.Blazor.Components.ImageEditor

Usage

Add the editor to your _Imports.razor:

@using PSC.Blazor.Components.ImageEditor
@using PSC.Blazor.Components.ImageEditor.Enums
@using PSC.Blazor.Components.ImageEditor.Models

There is nothing to add to your index.html, host.html or App.razor. The component imports its own script the first time an editor opens, and loads Cropper.js from the package itself — a page that never shows an editor loads neither.

Add an ImageEditor to a page

<ImageEditor Src="@_address"
             Alt="The picture being edited"
             OnSave="SaveAsync"
             Style="height: 460px;" />

@code {
    private string? _address = "/pictures/figure-1.png";

    private async Task SaveAsync(EditedImage edited)
    {
        await using (edited)
        {
            await using var writing = File.Create("figure-1-cropped.png");
            await edited.Content.CopyToAsync(writing);
        }
    }
}

Give the editor a height. It fills whatever the host gives it, and inside a container with no height it has none. Style="height: 460px;" is the default for that reason.

What you get back

OnSave hands you an EditedImage:

The bytes come back as a stream, not as a string, and this matters on Blazor Server. A value returned from JavaScript travels over the SignalR circuit, and a cropped picture is routinely larger than the message size a circuit allows by default. A component returning a data URL would work in WebAssembly, work for small pictures on a server, and fail for large ones with an error about the circuit rather than about the picture. Take what you need from the stream and dispose it; the editor does not hold on to it.

The editor never writes anywhere. Whether the result replaces the picture that was edited, becomes a new one, or is thrown away is your code’s decision — which keeps the component out of your storage and out of your naming.

Drive it from your own buttons

Set ShowToolbar="false" and call the component through @ref. Every toolbar action is a public method.

<ImageEditor @ref="_editor" Src="@_address" ShowToolbar="false" />

<button @onclick="() => _editor!.RotateAsync(90)">Rotate</button>
<button @onclick="() => _editor!.FlipAsync(true)">Flip across</button>
<button @onclick="() => _editor!.ZoomAsync(0.1)">Zoom in</button>
<button @onclick="() => _editor!.SetAspectRatioAsync(ImageAspectRatio.Square)">Square</button>
<button @onclick="() => _editor!.ResetAsync()">Start again</button>
<button @onclick="SaveAsync">Save</button>

@code {
    private ImageEditor? _editor;

    private async Task SaveAsync()
    {
        var edited = await _editor!.GetImageAsync();

        if (edited is not null)
        {
            await using (edited)
            {
                // Yours to store.
            }
        }
    }
}

Hold the crop to a shape

<ImageEditor Src="@_address" AspectRatio="ImageAspectRatio.Wide" />

Keep the saved picture small

<ImageEditor Src="@_address"
             Format="ImageFormat.Jpeg"
             Quality="0.8"
             MaxWidth="1600" />

MaxWidth and MaxHeight cap the saved picture without changing its shape. Quality applies to JPEG and WebP and is ignored for PNG. PNG is the default because a crop of a chart or a diagram keeps its lines and its text sharp, where JPEG softens both.

Documentation

Properties

Methods

Events

A picture from another origin

A browser will not let a canvas read back a picture fetched from another origin unless that origin allows it, so cropping one will fail when it is saved. Serve pictures from your own host, or proxy them through it.

Demo

ImageEditorDemo in this repository is a Blazor Server app, deliberately: what is most likely to break in a component like this is the way an edited picture comes back over a circuit, and a demo that ran only in WebAssembly would never exercise it.

dotnet run --project ImageEditorDemo