Skip to content

Commit

Permalink
fix UI / UI for crop page
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaxymGorn
MaxymGorn committed Nov 4, 2023
1 parent 4053af1 commit c449345
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 16 deletions.
3 changes: 2 additions & 1 deletion src/Cropper.Blazor/Client/Components/Docs/CodeInline.razor
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<code class="docs-code @(SecondaryColor? $"docs-code-secondary {Class}": $"docs-code-primary {Class}")">
<code style="@Style" class="docs-code @(SecondaryColor? $"docs-code-secondary {Class}": $"docs-code-primary {Class}")">
@if (Tag) {<span>&lt;</span>}@Code@ChildContent@if (Tag) {<span>&gt;</span>}
</code>

Expand All @@ -7,6 +7,7 @@
[Parameter] public RenderFragment? ChildContent { get; set; } = null;

[Parameter] public string? Code { get; set; } = null;
[Parameter] public string Style { get; set; } = string.Empty;

[Parameter] public bool SecondaryColor { get; set; }

Expand Down
30 changes: 15 additions & 15 deletions src/Cropper.Blazor/Client/Pages/Crop/CropPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,31 +58,31 @@
<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>
This <CodeInline Class="docs-code-tertiary">GetCroppedCanvasAsync</CodeInline> method returns <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline>.
Use <CodeInline>JSRuntimeObjectRef</CodeInline> in the
<CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> which represents a reference to a JavaScript cropped canvas object.
After then, you can display the canvas as an image directly, or use <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink></CodeInline> to get a Data URL, or use <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob</MudLink></CodeInline> to get a blob and upload it to server with <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</MudLink></CodeInline> if the browser supports these APIs.
<br><br>
In Blazor framework we can invoke JavaScript functions and read a returned value through <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntimeextensions.invokeasync">JSRuntimeExtensions.InvokeAsync</MudLink></CodeInline>.
<br>
Example invoking function for get a canvas drawn in URL format from the cropped image with reference to a JavaScript cropped canvas object: <CodeInline Class="docs-code-tertiary">await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync&lt;string&gt;("toDataURL", "image/png", 1);</CodeInline>
<MudAlert Class="mt-3" Severity="Severity.Info">
<b>Note:</b> The aspect ratio of the output canvas will be fitted to the aspect ratio of the crop box automatically.
</MudAlert>
<MudAlert Class="mt-3" Severity="Severity.Info">
<b>Note:</b> If you intend to get a JPEG image from the output canvas, you should set the <CodeInline>fillColor</CodeInline> option first, if not, the transparent part in the JPEG image will become black by default.
</MudAlert>
<MudAlert Class="mt-3" Severity="Severity.Warning">
<br>
This <CodeInline Class="docs-code-tertiary">GetCroppedCanvasAsync</CodeInline> method returns <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline>.
Use <CodeInline>JSRuntimeObjectRef</CodeInline> in the
<CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> which represents a reference to a JavaScript cropped canvas object.
After then, you can display the canvas as an image directly, or use <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink> to get a Data URL, or use <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob</MudLink> to get a blob and upload it to server with <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</MudLink> if the browser supports these APIs.
<br><br>
In Blazor framework we can invoke JavaScript functions and read a returned value through <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntimeextensions.invokeasync">JSRuntimeExtensions.InvokeAsync</MudLink>.
<br>
Example invoking function for get a canvas drawn in URL format from the cropped image with reference to a JavaScript cropped canvas object: <CodeInline Style="color: var(--mud-palette-text-primary);" Class="text-anywhere-wrap">await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync&lt;string&gt;("toDataURL", "image/png", 1);</CodeInline>
<MudAlert Class="mt-3 text-anywhere-wrap" Severity="Severity.Warning">
<b>Note:</b> If you gathering get a Data URL using <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> by <CodeInline>JSRuntimeObjectRef</CodeInline> property.
<b>Don't use</b> <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink></CodeInline> without arguments default method and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL(type)</MudLink></CodeInline> method due to image quality was little lost through
default value <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline>.
<b>Don't use</b> <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink> without arguments default method and <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL(type)</MudLink> method due to image quality was little lost through
default value <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink>.
In addition, different browsers have different image encoder compression, usually it is 92 or 80 percent of the full image quality.
</MudAlert>
<MudAlert Class="mt-3" Severity="Severity.Warning">
<MudAlert Class="mt-3 text-anywhere-wrap" Severity="Severity.Warning">
<b>Note:</b> if you gathering to get a blob using <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> by <CodeInline>JSRuntimeObjectRef</CodeInline> property.
<b>Don't use</b> <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback)</MudLink></CodeInline> and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback, type)</MudLink></CodeInline> without <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline> argument due to image quality was little lost through
default value <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline>.
<b>Don't use</b> <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback)</MudLink> and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback, type)</MudLink></CodeInline> without <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink> argument due to image quality was little lost through
default value <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink>.
In addition, different browsers have different image encoder compression, usually it is 92 or 80 percent of the full image quality.
</MudAlert>
</Description>
Expand Down
4 changes: 4 additions & 0 deletions src/Cropper.Blazor/Client/Styles/components/docspage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,7 @@
}
}
}

.text-anywhere-wrap {
overflow-wrap: anywhere;
}

0 comments on commit c449345

Please sign in to comment.