-
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.
Add examples when cropping images, Add generation default values of m…
…ethod parameters for API (#263) - add generation default values of method parameters for API ## Target <!-- Why are you making this change? --> Add examples when cropping images Add generation default values of method parameters for API #### Open Questions <!-- OPTIONAL - [ ] Use the GitHub checklists to spark discussion on issues that may arise from your approach. Please tick the box and explain your answer. --> ## Checklist <!-- It serves as a gentle reminder for common tasks. Confirm it's done and check everything that applies. --> - [x] Documentation updated - [x] Tests cover new or modified code - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] New dependencies added - [ ] Includes breaking changes - [ ] Version bumped ## Visuals <!-- OPTIONAL Show results both before and after this change. When the output changes, it can be a screenshot of a trace, metric, or log illustrating the change. -->
- Loading branch information
Showing
40 changed files
with
750 additions
and
57 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
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
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
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
83 changes: 83 additions & 0 deletions
83
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropPolygonImageExample.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,83 @@ | ||
| @using Cropper.Blazor.Extensions; | ||
| @using Cropper.Blazor.Models; | ||
|
|
||
| <div class="img-container cropper-face-pentagon"> | ||
| <CropperComponent Class="big-img" Src="images/Mushrooms.jpg" @ref="cropperComponent" Options="new Blazor.Models.Options()" /> | ||
| </div> | ||
|
|
||
| <div class="button" @onclick="GetCroppedCanvasAsync"> | ||
| Get cropped image | ||
| </div> | ||
|
|
||
| <img class="cropped-img-container" src="@croppedCanvasDataURL" /> | ||
|
|
||
| @* Make sure the size of the image fits perfectly into the container *@ | ||
| <style> | ||
| .cropper-face { | ||
| opacity: 25%; | ||
| } | ||
| .img-container.cropper-face-pentagon .cropper-container .cropper-crop-box .cropper-face { | ||
| clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); | ||
| } | ||
| .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%; | ||
| } | ||
| /* Means that the cropped image will take up 100% of the width of its containing element */ | ||
| .cropped-img-container { | ||
| 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 { | ||
| [Inject] private IJSRuntime? JSRuntime { get; set; } | ||
|
|
||
| private CropperComponent? cropperComponent = null!; | ||
| private string croppedCanvasDataURL; | ||
|
|
||
| public async Task GetCroppedCanvasAsync() | ||
| { | ||
| GetCroppedCanvasOptions getCroppedCanvasOptions = new GetCroppedCanvasOptions | ||
| { | ||
| MaxHeight = 4096, | ||
| MaxWidth = 4096, | ||
| ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString() | ||
| }; | ||
|
|
||
| // Get a reference to a JavaScript cropped canvas object. | ||
| CroppedCanvas croppedCanvas = await cropperComponent!.GetCroppedCanvasAsync(getCroppedCanvasOptions); | ||
| // Invoke toDataURL JavaScript function from the canvas object. | ||
| croppedCanvasDataURL = await JSRuntime!.InvokeAsync<string>( | ||
| "window.getPolygonImage", | ||
| croppedCanvas!.JSRuntimeObjectRef, | ||
| // Defines a polygon using an SVG fill rule and a set of vertices previously defined in the following format styles: | ||
| // .img-container.cropper-face-pentagon.cropper-container.cropper-crop-box.cropper-face { | ||
| // clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); | ||
| // } | ||
| // In our case, we need to pass the same data, but without the percent sign (%) | ||
| new int[] { 50, 0, 100, 38, 82, 100, 18, 100, 0, 38 }); | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropPolygonImage_Script.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,3 @@ | ||
| @namespace Cropper.Blazor.Client.Pages.Crop.Examples | ||
|
|
||
| @* Dummy file do not remove, needed for content section *@ |
34 changes: 34 additions & 0 deletions
34
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropPolygonImage_ScriptCode.html
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,34 @@ | ||
| <div class="mud-codeblock"> | ||
| <div class="html"> | ||
| <pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">></span> | ||
| window.getPolygonImage = (sourceCanvas, path) => { | ||
| const canvas = document.createElement('canvas'); | ||
| const context = canvas.getContext('2d'); | ||
| const width = sourceCanvas.width, | ||
| height = sourceCanvas.height; | ||
|
|
||
| canvas.width = width; | ||
| canvas.height = height; | ||
| context.imageSmoothingEnabled = true; | ||
|
|
||
| context.beginPath(); | ||
| context.moveTo(path[0] * width / 100, path[1] * height / 100); | ||
| context.fillStyle = "rgba(255, 255, 255, 0)"; | ||
|
|
||
| for (let i = 2; i < path.length; i += 2) { | ||
| context.lineTo(path[i] * width / 100, path[i + 1] * height / 100); | ||
| } | ||
|
|
||
| context.closePath(); | ||
| context.clip(); | ||
| context.fill(); | ||
| context.globalCompositeOperation = 'lighter'; | ||
| context.drawImage(sourceCanvas, 0, 0, width, height); | ||
|
|
||
| return canvas.toDataURL("image/png", 1); | ||
| } | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">script</span> <span class="htmlTagDelimiter">></span> | ||
| </pre> | ||
| </div> | ||
| </div> |
75 changes: 75 additions & 0 deletions
75
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropRoundImageExample.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,75 @@ | ||
| @using Cropper.Blazor.Extensions; | ||
| @using Cropper.Blazor.Models; | ||
|
|
||
| <div class="img-container cropper-face-circle"> | ||
| <CropperComponent Class="big-img" Src="images/lone-tree.jpg" @ref="cropperComponent" Options="new Blazor.Models.Options()" /> | ||
| </div> | ||
|
|
||
| <div class="button" @onclick="GetCroppedCanvasAsync"> | ||
| Get cropped image | ||
| </div> | ||
|
|
||
| <img class="cropped-img-container" src="@croppedCanvasDataURL" /> | ||
|
|
||
| @* Make sure the size of the image fits perfectly into the container *@ | ||
| <style> | ||
| .cropper-face { | ||
| opacity: 25%; | ||
| } | ||
| .img-container.cropper-face-circle .cropper-container .cropper-crop-box .cropper-face { | ||
| border-radius: 50%; | ||
| } | ||
| .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%; | ||
| } | ||
| /* Means that the cropped image will take up 100% of the width of its containing element */ | ||
| .cropped-img-container { | ||
| 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 { | ||
| [Inject] private IJSRuntime? JSRuntime { get; set; } | ||
|
|
||
| private CropperComponent? cropperComponent = null!; | ||
| private string croppedCanvasDataURL; | ||
|
|
||
| public async Task GetCroppedCanvasAsync() | ||
| { | ||
| GetCroppedCanvasOptions getCroppedCanvasOptions = new GetCroppedCanvasOptions | ||
| { | ||
| MaxHeight = 4096, | ||
| MaxWidth = 4096, | ||
| ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString() | ||
| }; | ||
|
|
||
| // Get a reference to a JavaScript cropped canvas object. | ||
| CroppedCanvas croppedCanvas = await cropperComponent!.GetCroppedCanvasAsync(getCroppedCanvasOptions); | ||
| // Invoke toDataURL JavaScript function from the canvas object. | ||
| croppedCanvasDataURL = await JSRuntime!.InvokeAsync<string>("window.getEllipseImage", croppedCanvas!.JSRuntimeObjectRef); | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropRoundImage_Script.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,3 @@ | ||
| @namespace Cropper.Blazor.Client.Pages.Crop.Examples | ||
|
|
||
| @* Dummy file do not remove, needed for content section *@ |
26 changes: 26 additions & 0 deletions
26
src/Cropper.Blazor/Client/Pages/Crop/Examples/CropRoundImage_ScriptCode.html
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,26 @@ | ||
| <div class="mud-codeblock"> | ||
| <div class="html"> | ||
| <pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">></span> | ||
| window.getEllipseImage = (sourceCanvas) => { | ||
| const createdCanvas = document.createElement('canvas'); | ||
| const contextCanvas = createdCanvas.getContext('2d'); | ||
| const widthCanvas = sourceCanvas.width, | ||
| heightCanvas = sourceCanvas.height; | ||
|
|
||
| createdCanvas.width = widthCanvas; | ||
| createdCanvas.height = heightCanvas; | ||
| contextCanvas.imageSmoothingEnabled = true; | ||
|
|
||
| contextCanvas.drawImage(sourceCanvas, 0, 0, widthCanvas, heightCanvas); | ||
| contextCanvas.globalCompositeOperation = 'destination-in'; | ||
| contextCanvas.beginPath(); | ||
| contextCanvas.ellipse(widthCanvas / 2, heightCanvas / 2, widthCanvas / 2, heightCanvas / 2, 0 * Math.PI, 0, 180 * Math.PI, true); | ||
| contextCanvas.fill(); | ||
|
|
||
| return createdCanvas.toDataURL("image/png", 1); | ||
| } | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">script</span> <span class="htmlTagDelimiter">></span> | ||
| </pre> | ||
| </div> | ||
| </div> |
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
Oops, something went wrong.