Chronos.Blazor.Cropper 1.0.1

There is a newer version of this package available.
See the version list below for details.

dotnet add package Chronos.Blazor.Cropper --version 1.0.1

NuGet\Install-Package Chronos.Blazor.Cropper -Version 1.0.1

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="Chronos.Blazor.Cropper" Version="1.0.1" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="Chronos.Blazor.Cropper" Version="1.0.1" />
                    

                            Directory.Packages.props

<PackageReference Include="Chronos.Blazor.Cropper" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add Chronos.Blazor.Cropper --version 1.0.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Chronos.Blazor.Cropper, 1.0.1"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package Chronos.Blazor.Cropper@1.0.1

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=Chronos.Blazor.Cropper&version=1.0.1
                    

                            Install as a Cake Addin

#tool nuget:?package=Chronos.Blazor.Cropper&version=1.0.1
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Blazor.Cropper

A blazor library provide a component to crop image
alternate text is missing from this package README image =>

It is:

almost full c#(with only 3 lines of js)
mobile compatible
lighweight
support proportion
GIF crop support(only for files smaller than 1mb)

For a long time, crop image in blazor bother me a lot. That's why I tried to implement a cropper in blazor.

Usage

to use it, you should first paste following code into your index.html:

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

Then, you can install our nuget pkg and use it like follow:

@page "/cropper"

<h1>Cropper</h1>
<InputFile OnChange="OnInputFileChange"></InputFile>
@if (!string.IsNullOrEmpty(imgUrl))
{
    <center>
        <h2>Crop Result:</h2>
        <img src="@imgUrl"/>
    </center>   
}
@if (file!=null)
{
    <Cropper ImageFile="file" OnCrop="@OnCropedAsync"></Cropper>
}
@code {
    IBrowserFile file;
    string imgUrl = "";
    void OnInputFileChange(InputFileChangeEventArgs args)
    {
        file = args.File;
    }
    async Task OnCropedAsync(Stream stream)
    {
        var bytes = new byte[stream.Length];
        await stream.ReadAsync(bytes,0,(int)stream.Length);
        var format = "image/png";
        imgUrl = $"data:{format};base64,{Convert.ToBase64String(bytes)}";
    }
}

For more details, see the sample project.
To build it, simply clone it and run it in visual studio. The running result should be like this:
alternate text is missing from this package README image

Note

In many cases, I found It's really slow to convert image data to base64 format and set it as img src(many times slower than image crop process). So I stronly recommend you to avoid doing this in blazor.

Product	Compatible and additional computed target framework versions.
.NET	net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.0-rc.1.20451.17)
- SixLabors.ImageSharp (>= 1.0.1)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Chronos.Blazor.Cropper:

Repository	Stars
CnGal/CnGalWebSite CnGal是一个非营利性的，立志于收集整理国内制作组创作的中文Galgame/AVG的介绍、攻略、评测、感想等内容的资料性质的网站。	130