Description
Cropper.Blazor — most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and other frameworks. Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.
Key features and aspects of the Cropper.Blazor package include
Blazor Integration: Cropper.Blazor is specifically designed for Blazor applications, allowing developers to effortlessly incorporate image cropping capabilities into their Blazor components and pages.
Drag-and-Resize Interaction: Users can easily drag and resize the cropping area to precisely select the desired portion of an image. This intuitive interaction method ensures accurate and efficient cropping.
Rotation Support: Cropper.Blazor includes the ability to rotate the selected image area, giving users full control over the orientation of their cropped content.
Aspect Ratio Control: Developers can define custom aspect ratios for cropping, ensuring that the resulting image maintains specific proportions. This is particularly valuable for applications that require standardized image dimensions.
Zoom Functionality: Cropper.Blazor allows users to zoom in and out of the image to fine-tune their cropping selection, guaranteeing precise results.
Data Retrieval: The library provides methods to retrieve detailed information about the cropped area, such as coordinates and dimensions. This data can be easily captured and utilized for further processing or image uploads.
Customization: Cropper.Blazor offers a wide range of configuration options, enabling developers to tailor the cropping experience to match the visual style and user interface of their Blazor applications.
Cross-Browser Compatibility: The package is compatible with various modern web browsers, ensuring consistent functionality and user experience across different platforms.
Documentation: Cropper.Blazor is accompanied by comprehensive documentation and practical examples, simplifying the integration process and helping developers make the most of its features.
Open Source: Cropper.Blazor is open-source software, available for free use in both personal and commercial Blazor projects.
Cropper.Blazor streamlines the implementation of image cropping and editing within Blazor applications, enhancing user engagement and enabling dynamic image manipulation. Whether you are developing a Blazor-based image editor, profile picture uploader, or any other application that requires image cropping, Cropper.Blazor is a valuable package that simplifies the development process and enriches your application's capabilities.
Manual Install
If you already have a project and want to add Cropper.Blazor to it, either from a default template or a working application.
Install the package
Find the package through NuGet Package Manager or install it with following command:
dotnet add package Cropper.Blazor
Add Imports
After the package is added, you need to add the following in your _Imports.razor
@using Cropper.Blazor.Components
Add font and style references
Add the following to your HTML head section, it's either index.html or _Layout.cshtml/_Host.cshtml depending on whether you're running WebAssembly/MAUI or Server.
<link href="_content/Cropper.Blazor/cropper.min.css" rel="stylesheet" />
Add script reference
In the same file but located in the end of it add the Cropper.Blazor js file, it should be in the same location as the default blazor script.
<script src="_content/Cropper.Blazor/cropper.min.js"></script>
Register Services
Add the following in Program.cs
You can change the path to the cropperJSInterop.min.js module if for some reason
it is located outside the server root folder using the examples below to override the internal or full global cropperJSInterop.min.js module path.
Actions are usually required when an application is deployed to an IIS Web Server.
using Cropper.Blazor.Extensions; builder.Services.AddCropper();
Also for server-side (Blazor Server or MVC with Blazor Server) you need add configuration SignalR, increase MaximumReceiveMessageSize of a single incoming hub message (default is 32KB) and map SignalR to your path. However, if your images are too large, the MaximumReceiveMessageSize variable should be increased to the desired value.
using Cropper.Blazor.Extensions; builder.Services.AddServerSideBlazor() .AddHubOptions(options => { options.MaximumReceiveMessageSize = 32 * 1024 * 100; }); app.MapBlazorHub();
Resolve MAUI project dependency conflicts
Run following command and rebuilt the project. If that doesn't help, try the step below about override package versions.
dotnet workload update
Overriding package versions
When resolving MAUI project dependency conflicts, you can override an individual package version by using the VersionOverride property on a <PackageReference /> item.
<PackageReference Include="Package name" VersionOverride="New version package" />
Add Components
Add the following components to your MainLayout.razor
@using Cropper.Blazor.Components <CropperComponent Class="cropper-example" Src="cropperblazor.png" Options="new Cropper.Blazor.Models.Options()" /> <style> .cropper-example { max-height: 300px; width: 100%; } </style>