Cropper.Blazor 1.1.0

Cropper.Blazor

Cropper.Blazor is a component element that wraps around Cropper.js

Demo

• CropperBlazor.github.io/demo

Prerequisites

• .NET 7.0 for v7.x.x or .NET 6.0 for v6.x.x

Installation

dotnet add package Cropper.Blazor

Usage

Import Custom Element:

@using Cropper.Blazor.Components

Add the following to index.html (client-side) or _Host.cshtml (server-side) in the head

<link href="_content/Cropper.Blazor/cropper.css" rel="stylesheet" />

Add the following to index.html or _Host.cshtml in the body

<script src="_content/Cropper.Blazor/cropper.js"></script>

Add the following to the relevant sections of Program.cs

using Cropper.Blazor.Extensions;

builder.Services.AddCropper();

And then use it in Razor file (for example):

<CropperComponent
  Class="cropper-demo"
  ErrorLoadImageClass="cropper-error-load"
  @ref="cropperComponent"
  OnCropStartEvent="OnCropStartEvent"
  OnCropEndEvent="OnCropEndEvent"
  OnCropEvent="OnCropEvent"
  OnZoomEvent="OnZoomEvent"
  OnCropMoveEvent="OnCropMoveEvent"
  OnReadyEvent="OnCropReadyEvent"
  OnLoadImageEvent="OnLoadImageEvent"
  Src="@Src"
  Loading="lazy"
  ErrorLoadImageSrc="@ErrorLoadImageSrc"
  IsErrorLoadImage="@IsErrorLoadImage"
  OnErrorLoadImageEvent="OnErrorLoadImageEvent"
  Options="options">
</CropperComponent>

And then use it in *.razor.cs file