-
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 generation default values of method parameters for API
- Loading branch information
Showing
25 changed files
with
335 additions
and
45 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.addClipPathPolygon", | ||
| 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.addClipPathPolygon = (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.addClipPathEllipse", 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.addClipPathEllipse = (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
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.