-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix issue with set up Src in cropper component when call replace imag…
…e function; add replace examples
- Loading branch information
Showing
15 changed files
with
383 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
src/Cropper.Blazor/Client/Pages/Replace/CropperReplacePage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| @page "/examples/replacing" | ||
| @using Cropper.Blazor.Client.Models; | ||
| @using Cropper.Blazor.Client.Pages.Replace.Examples | ||
|
|
||
| <DocsPage> | ||
| <DocsPageHeader Title="Replace image" SubTitle="Replace the image's src and rebuild the cropper." /> | ||
| <DocsPageContent> | ||
|
|
||
| <DocsPageSection> | ||
| <SectionHeader Title="Simple Usage"> | ||
| <Description> | ||
| With the <CodeInline Class="docs-code-warning">ReplaceAsync</CodeInline> method | ||
| you can replace the image's src and rebuild the cropper. | ||
| <br><br> | ||
| <CodeInline Class="docs-code-warning">GetCroppedCanvasDataURLAsync</CodeInline> method have following arguments: | ||
| <MudList> | ||
| <MudListItem Icon="@Icons.Material.Filled.Circle" IconSize="Size.Small" IconColor="Color.Primary"> | ||
| <CodeInline>url (required)</CodeInline> - used to set a new URL; | ||
| </MudListItem> | ||
| <MudListItem Icon="@Icons.Material.Filled.Circle" IconSize="Size.Small" IconColor="Color.Secondary"> | ||
| <CodeInline>hasSameSize (not required, default - true)</CodeInline> - If the new image has the same size as the old one, then it will not rebuild the cropper and only update the URLs of all related images. This can be used for applying filters; | ||
| </MudListItem> | ||
| <MudListItem Icon="@Icons.Material.Filled.Circle" IconSize="Size.Small" IconColor="Color.Secondary"> | ||
| <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/system.threading.cancellationtokensource">CancellationToken</MudLink> (not required)</CodeInline> - used to propagate notifications that the operation should be canceled. | ||
| </MudListItem> | ||
| </MudList> | ||
| <br> | ||
| </Description> | ||
| </SectionHeader> | ||
| <SectionContent @ref="ActiveReplaceActive" ChildContent="ReplaceActiveRenderFragment" Codes="@( | ||
| new CodeFile[] | ||
| { | ||
| new CodeFile("Basic replace image with the same size", "BasicReplaceImageWithSameSizeExample"), | ||
| new CodeFile("Basic replace image with the new size", "BasicReplaceImageWithNewSizeExample"), | ||
| new CodeFile("Using input file replace image with the same size", "BasicInputReplaceImageWithSameSizeExample"), | ||
| new CodeFile("Using input file replace image with the new size", "BasicInputReplaceImageWithNewSizeExample") | ||
| })" /> | ||
| </DocsPageSection> | ||
|
|
||
| </DocsPageContent> | ||
| </DocsPage> |
39 changes: 39 additions & 0 deletions
39
src/Cropper.Blazor/Client/Pages/Replace/CropperReplacePage.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| using Cropper.Blazor.Client.Components.Docs; | ||
| using Cropper.Blazor.Client.Pages.Replace.Examples; | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace Cropper.Blazor.Client.Pages.Replace | ||
| { | ||
| public partial class CropperReplacePage | ||
| { | ||
| SectionContent ActiveReplaceActive = null!; | ||
|
|
||
| RenderFragment ReplaceActiveRenderFragment => builder => | ||
| { | ||
| if (ActiveReplaceActive.ActiveCode == nameof(BasicReplaceImageWithNewSizeExample)) | ||
| { | ||
| builder.OpenComponent<BasicReplaceImageWithNewSizeExample>(1); | ||
| builder.CloseComponent(); | ||
| } | ||
| else if (ActiveReplaceActive.ActiveCode == nameof(BasicReplaceImageWithSameSizeExample)) | ||
| { | ||
| builder.OpenComponent<BasicReplaceImageWithSameSizeExample>(1); | ||
| builder.CloseComponent(); | ||
| } | ||
| else if (ActiveReplaceActive.ActiveCode == nameof(BasicInputReplaceImageWithNewSizeExample)) | ||
| { | ||
| builder.OpenComponent<BasicInputReplaceImageWithNewSizeExample>(1); | ||
| builder.CloseComponent(); | ||
| } | ||
| else if (ActiveReplaceActive.ActiveCode == nameof(BasicInputReplaceImageWithSameSizeExample)) | ||
| { | ||
| builder.OpenComponent<BasicInputReplaceImageWithSameSizeExample>(1); | ||
| builder.CloseComponent(); | ||
| } | ||
| else | ||
| { | ||
| throw new InvalidOperationException(); | ||
| } | ||
| }; | ||
| } | ||
| } |
92 changes: 92 additions & 0 deletions
92
...opper.Blazor/Client/Pages/Replace/Examples/BasicInputReplaceImageWithNewSizeExample.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <div class="img-container"> | ||
| <CropperComponent Class="big-img" | ||
| Src="@src" | ||
| ErrorLoadImageSrc="@_errorLoadImageSrc" | ||
| ErrorLoadImageClass="cropper-error-load" | ||
| IsAvailableInitCropper="@IsAvailableInitCropper" | ||
| IsErrorLoadImage="@IsErrorLoadImage" | ||
| OnErrorLoadImageEvent="OnErrorLoadImageEvent" | ||
| @ref="cropperComponent" | ||
| Options="new Blazor.Models.Options()" /> | ||
| </div> | ||
|
|
||
| <InputFile id="imageReplaceInput" OnChange="ReplaceImageAsync" accept="image/*" /> | ||
|
|
||
| @* Make sure the size of the image fits perfectly into the container *@ | ||
| <style> | ||
| .big-img { | ||
| max-height: 400px; | ||
| /* This rule is very important, please don't ignore this */ | ||
| max-width: 100%; | ||
| } | ||
| .img-container { | ||
| max-height: 400px; | ||
| width: 100%; | ||
| } | ||
| /* These styles are just needed for a nice button and don't related with cropper component */ | ||
| #imageReplaceInput { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
|
|
||
| @code { | ||
| private readonly string _errorLoadImageSrc = "not-found-image.jpg"; | ||
| private bool IsErrorLoadImage { get; set; } = false; | ||
| private bool IsAvailableInitCropper { get; set; } = true; | ||
| private string src = "images/Landscape-Color.jpg"; | ||
| private CropperComponent? cropperComponent = null!; | ||
|
|
||
| public async Task ReplaceImageAsync(InputFileChangeEventArgs inputFileChangeEventArgs) | ||
| { | ||
| IBrowserFile imageFile = inputFileChangeEventArgs.File; | ||
|
|
||
| if (imageFile != null) | ||
| { | ||
| string oldSrc = src; | ||
| string newSrc = await cropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size); | ||
|
|
||
| /* These conditions are required for error handling. */ | ||
| if (IsErrorLoadImage) | ||
| { | ||
| IsAvailableInitCropper = true; | ||
| IsErrorLoadImage = false; | ||
| } | ||
| else | ||
| { | ||
| IsAvailableInitCropper = false; | ||
| } | ||
|
|
||
| await Task.WhenAll( | ||
| cropperComponent?.ReplaceAsync(newSrc, false).AsTask(), | ||
| cropperComponent?.RevokeObjectUrlAsync(oldSrc).AsTask()) | ||
| .ContinueWith(x => | ||
| { | ||
| src = newSrc; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| public void OnErrorLoadImageEvent(ErrorEventArgs errorEventArgs) | ||
| { | ||
| IsErrorLoadImage = true; | ||
| Destroy(); | ||
| StateHasChanged(); | ||
| } | ||
|
|
||
| private void Destroy() | ||
| { | ||
| cropperComponent?.Destroy(); | ||
| cropperComponent?.RevokeObjectUrlAsync(src); | ||
| } | ||
| } |
92 changes: 92 additions & 0 deletions
92
...pper.Blazor/Client/Pages/Replace/Examples/BasicInputReplaceImageWithSameSizeExample.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <div class="img-container"> | ||
| <CropperComponent Class="big-img" | ||
| Src="@src" | ||
| ErrorLoadImageSrc="@_errorLoadImageSrc" | ||
| ErrorLoadImageClass="cropper-error-load" | ||
| IsAvailableInitCropper="@IsAvailableInitCropper" | ||
| IsErrorLoadImage="@IsErrorLoadImage" | ||
| OnErrorLoadImageEvent="OnErrorLoadImageEvent" | ||
| @ref="cropperComponent" | ||
| Options="new Blazor.Models.Options()" /> | ||
| </div> | ||
|
|
||
| <InputFile id="imageReplaceInput" OnChange="ReplaceImageAsync" accept="image/*" /> | ||
|
|
||
| @* Make sure the size of the image fits perfectly into the container *@ | ||
| <style> | ||
| .big-img { | ||
| max-height: 400px; | ||
| /* This rule is very important, please don't ignore this */ | ||
| max-width: 100%; | ||
| } | ||
| .img-container { | ||
| max-height: 400px; | ||
| width: 100%; | ||
| } | ||
| /* These styles are just needed for a nice button and don't related with cropper component */ | ||
| #imageReplaceInput { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
|
|
||
| @code { | ||
| private readonly string _errorLoadImageSrc = "not-found-image.jpg"; | ||
| private bool IsErrorLoadImage { get; set; } = false; | ||
| private bool IsAvailableInitCropper { get; set; } = true; | ||
| private string src = "images/Landscape-Color.jpg"; | ||
| private CropperComponent? cropperComponent = null!; | ||
|
|
||
| public async Task ReplaceImageAsync(InputFileChangeEventArgs inputFileChangeEventArgs) | ||
| { | ||
| IBrowserFile imageFile = inputFileChangeEventArgs.File; | ||
|
|
||
| if (imageFile != null) | ||
| { | ||
| string oldSrc = src; | ||
| string newSrc = await cropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size); | ||
|
|
||
| /* These conditions are required for error handling. */ | ||
| if (IsErrorLoadImage) | ||
| { | ||
| IsAvailableInitCropper = true; | ||
| IsErrorLoadImage = false; | ||
| } | ||
| else | ||
| { | ||
| IsAvailableInitCropper = false; | ||
| } | ||
|
|
||
| await Task.WhenAll( | ||
| cropperComponent?.ReplaceAsync(newSrc, false).AsTask(), | ||
| cropperComponent?.RevokeObjectUrlAsync(oldSrc).AsTask()) | ||
| .ContinueWith(x => | ||
| { | ||
| src = newSrc; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| public void OnErrorLoadImageEvent(ErrorEventArgs errorEventArgs) | ||
| { | ||
| IsErrorLoadImage = true; | ||
| Destroy(); | ||
| StateHasChanged(); | ||
| } | ||
|
|
||
| private void Destroy() | ||
| { | ||
| cropperComponent?.Destroy(); | ||
| cropperComponent?.RevokeObjectUrlAsync(src); | ||
| } | ||
| } |
52 changes: 52 additions & 0 deletions
52
src/Cropper.Blazor/Client/Pages/Replace/Examples/BasicReplaceImageWithNewSizeExample.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <div class="img-container"> | ||
| <CropperComponent Class="big-img" Src="images/Landscape-Color.jpg" @ref="cropperComponent" Options="new Blazor.Models.Options()" /> | ||
| </div> | ||
|
|
||
| @if (!IsReplaced) | ||
| { | ||
| <div class="button" @onclick="ReplaceImageAsync"> | ||
| Replace image | ||
| </div> | ||
| } | ||
|
|
||
| @* Make sure the size of the image fits perfectly into the container *@ | ||
| <style> | ||
| .big-img { | ||
| max-height: 400px; | ||
| /* This rule is very important, please don't ignore this */ | ||
| max-width: 100%; | ||
| } | ||
| .img-container { | ||
| max-height: 400px; | ||
| width: 100%; | ||
| } | ||
| /* These styles are just needed for a nice button and don't related with cropper component */ | ||
| .button { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| background-color: #007bff; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
|
|
||
| @code { | ||
| private CropperComponent? cropperComponent = null!; | ||
|
|
||
| /* This property is only needed to display the 'Replace image' block. */ | ||
| private bool IsReplaced = false; | ||
|
|
||
| public async Task ReplaceImageAsync() | ||
| { | ||
| IsReplaced = true; | ||
|
|
||
| await cropperComponent!.ReplaceAsync("images/raspberry.jpg", false); | ||
| } | ||
| } |
Oops, something went wrong.