{"id":19965867,"url":"https://github.com/chronostasys/blazor.cropper","last_synced_at":"2025-04-05T20:08:11.504Z","repository":{"id":37469445,"uuid":"297067723","full_name":"Chronostasys/Blazor.Cropper","owner":"Chronostasys","description":"A blazor library provides component to crop image","archived":false,"fork":false,"pushed_at":"2024-07-11T11:18:36.000Z","size":25169,"stargazers_count":85,"open_issues_count":8,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T19:05:27.222Z","etag":null,"topics":["blazor","crop","crop-image","cropper","csharp","dotnet"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chronostasys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-20T12:07:26.000Z","updated_at":"2025-01-15T06:18:25.000Z","dependencies_parsed_at":"2024-07-11T04:31:42.187Z","dependency_job_id":"c9bb81b3-f486-4ec5-a742-48a879ed2a68","html_url":"https://github.com/Chronostasys/Blazor.Cropper","commit_stats":{"total_commits":158,"total_committers":14,"mean_commits":"11.285714285714286","dds":0.6265822784810127,"last_synced_commit":"383ba865b658c31d63c215a666526b7eda338bac"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chronostasys%2FBlazor.Cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chronostasys%2FBlazor.Cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chronostasys%2FBlazor.Cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chronostasys%2FBlazor.Cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chronostasys","download_url":"https://codeload.github.com/Chronostasys/Blazor.Cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393570,"owners_count":20931813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","crop","crop-image","cropper","csharp","dotnet"],"created_at":"2024-11-13T02:31:52.604Z","updated_at":"2025-04-05T20:08:11.476Z","avatar_url":"https://github.com/Chronostasys.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor.Cropper\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8184731f2b374089a64e53d24e1c09a7)](https://app.codacy.com/gh/Chronostasys/Blazor.Cropper?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=Chronostasys/Blazor.Cropper\u0026utm_campaign=Badge_Grade)\n![GitHub](https://img.shields.io/github/license/Chronostasys/Blazor.Cropper)\n![Nuget](https://img.shields.io/nuget/v/Chronos.Blazor.Cropper)\n\nA blazor library provide a component to crop image  \n![](imgs/base.gif)=\u003e  \n![](imgs/1.gif) ![](imgs/2.gif) ![](imgs/3.gif)  \n\n[Sample site here](https://chronostasys.github.io/Blazor.Cropper/)  \nIt is:\n- almost full c#\n- fast\n- mobile compatible\n- lighweight\n- support proportion\n- **GIF crop support**(only for small files)\n- support [maui(blazor)](https://github.com/dotnet/maui)\n- open source on [github](https://github.com/Chronostasys/Blazor.Cropper)  \n\nIf you find Blazor.Cropper helpful, you could **star this repo**, it's really important to me.  \n\nFor a long time, crop image in blazor bother me a lot. That's why I tried to implement a cropper in blazor.    \n\n## Users\n- [CnGal](https://www.cngal.org/) CnGal是一个非营利性的，立志于收集整理国内制作组创作的中文Galgame/AVG的介绍、攻略、评测、感想等内容的资料性质的网站。\n\n## Maui Usage (new)\nBlazor.Cropper now supports [maui(blazor)](https://github.com/dotnet/maui)!  \nIn some platforms, you may need to use `FilePicker` to get the input image\nrather than using html input element. You can find details in the [maui sample project](https://github.com/Chronostasys/CropperMaui)\n\n## dotnet 6 changes\nAlthough most of apis remains the same, there're some new apis which provide better \nperformance in .Net 6.  \nIn dotnet 5, using `ImageCroppedResult.GetBase64Async();` to get the base64 result is fine. \nIn dotnet 6, it should be replaced with `ImageCroppedResult.GetDataAsync();`, which may combined \nwith new `SetImageAsync(this IJSRuntime js,byte[] bin,string imgid)` api to display the crop result.  \nYou may find dotnet 6 sample [here](CropperSampleV6)\n\n## Server-side Usage\nBlazor.Cropper is designed to be a client side library. However, [it can be used on server side blazor when setting `PureCSharpProcessing=\"true\"`](https://github.com/Chronostasys/Blazor.Cropper/issues/30).  \nPlease note that using Blazor.Cropper on server side could consume remarkable amount of server resources(including bandwidth, cpu and memory).  \n[Sample project](https://github.com/Chronostasys/ServerSideCropperExample)  \n\n\n## Quick Start\nOnly 4 steps to use Blazor.Cropper\n### Step0. Add nuget  pkg\nInstall our nuget pkg at [nuget.org](https://www.nuget.org/packages/Chronos.Blazor.Cropper). \nAdd namespace to `_import.razor`:  \n```razor\n@using Blazor.Cropper\n```\n### Step1. Add script referrence\nThen, you should paste following code into your index.html:  \n```html\n\u003cscript src=\"_content/Chronos.Blazor.Cropper/CropHelper.js\"\u003e\u003c/script\u003e\n```\n### Step2. Add cropper\nJust add cropper to your code. We recommend you to use it inside a modal card.  \n\n\nExample:\n```razor\n@* .... some code ...*@\n\u003cInputFile OnChange=\"OnInputFileChange\"\u003e\u003c/InputFile\u003e\n\u003cCropper ImageFile=\"file\" \u003e\u003c/Cropper\u003e\n@* .... some code ...*@\n    async Task OnInputFileChange(InputFileChangeEventArgs args)\n    {\n        file = args.File;\n    }\n@* .... some code ...*@\n@* Example below shows how to bind Cropper with an InputFile component using InputId.\n    Please note that you must set ImageFile property inorder to use gif crop or PureCSharpProcessing function.\n    \u003cInputFile id=\"input1\"\u003e\u003c/InputFile\u003e\n    \u003cCropper InputId=\"input1\" \u003e\u003c/Cropper\u003e\n*@\n```\n\n### Step3. Get result\nTo get the crop result, you need to get the reference of the `Cropper`, then call the `Cropper.GetCropedResult()` method.  \nExample:  \n```razor\n@* .... some code ...*@\n\u003cCropper ImageFile=\"file\" @ref=\"cropper\"\u003e\u003c/Cropper\u003e\n@* .... some code ...*@\n@code{\n    Cropper cropper;\n    @* .... some code ...*@\n    void GetCropResult()\n    {\n        var re = cropper.GetCropedResult();\n\n        // in dotnet 6 or later\n        var buffer = await re.GetDataAsync();\n        // donot transfer bytes to base64 in dotnet 6.\n        // if you want to display the crop result, use \n        // SetImageAsync(this IJSRuntime js,byte[] bin,string imgid) to\n        // do the job\n\n\n\n        // otherwise, get base64 directly\n        // var base64 = await re.GetBase64Async();\n    }\n    @* .... some code ...*@\n}\n```\n\n\n## Api referrence\nWe have detailed xml comments on Cropper's properties \u0026 methods, simply read it while use it!  \nOn the other hand, you can go to [the sample project](CropperSampleV6) for usage examples.  \nTo build it, simply clone it and run it in visual studio. The running result should be like this:  \n![](2020-09-26-12-29-30.png)  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchronostasys%2Fblazor.cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchronostasys%2Fblazor.cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchronostasys%2Fblazor.cropper/lists"}