From f1cecf3ca92b7440cdea254666be68e8580c48a6 Mon Sep 17 00:00:00 2001
From: MaxymGorn <maximus56132@gmail.com>
Date: Wed, 15 Nov 2023 19:55:11 +0200
Subject: [PATCH 1/2] add cross-origin image loading example

---
 .../BasicUsage/BasicCropperUsagePage.razor    | 16 ++++++++++
 .../LoadCrossOriginImageExample.razor         | 29 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/Cropper.Blazor/Client/Pages/BasicUsage/Examples/LoadCrossOriginImageExample.razor

diff --git a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
index 5ca86bad..a8c47afb 100644
--- a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
+++ b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
@@ -75,5 +75,21 @@
             </SectionContent>
         </DocsPageSection>
 
+        <DocsPageSection>
+            <SectionHeader Title="Load cross-origin image">
+                <Description>
+                    A cross origin image with a <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</MudLink> attribute and an available Access-Control-Allow-Origin response header can be cropped by Cropper.Blazor.
+                    If you try to start cropper on a cross-origin image, please make sure that your browser supports
+                    <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">HTML5 CORS settings attributes</MudLink>,
+                    and your image server supports the Access-Control-Allow-Origin option (see the <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</MudLink>).
+                    <br><br>
+                    If your image isn't be a cross-origin, set the <CodeInline>CheckCrossOrigin</CodeInline> in the <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property to <CodeInline>false</CodeInline>.
+                </Description>
+            </SectionHeader>
+            <SectionContent Code="LoadCrossOriginImageExample">
+                <LoadCrossOriginImageExample />
+            </SectionContent>
+        </DocsPageSection>
+
     </DocsPageContent>
 </DocsPage>
diff --git a/src/Cropper.Blazor/Client/Pages/BasicUsage/Examples/LoadCrossOriginImageExample.razor b/src/Cropper.Blazor/Client/Pages/BasicUsage/Examples/LoadCrossOriginImageExample.razor
new file mode 100644
index 00000000..0813ff22
--- /dev/null
+++ b/src/Cropper.Blazor/Client/Pages/BasicUsage/Examples/LoadCrossOriginImageExample.razor
@@ -0,0 +1,29 @@
+@using Cropper.Blazor.Models
+
+<div class="img-container">
+    <CropperComponent Src="cropperblazor.png" Options="options" InputAttributes="InputAttributes" />
+</div>
+
+<style>
+    .img-container {
+        max-height: 300px;
+        width: 100%;
+    }
+</style>
+
+@code {
+    private Options options;
+
+    public Dictionary<string, object> InputAttributes { get; set; } = new Dictionary<string, object>
+    {
+        { "crossorigin", "anonymous" } // Another possible values: "use-credentials" or "" (the same as "anonymous"). An invalid keyword and an empty string will be handled as the anonymous keyword. For more information see official https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin documentation
+    };
+
+    protected override void OnInitialized()
+    {
+        options = new Options
+        {
+
+        };
+    }
+}

From b3767e9fc333a2d34abf3672111be44215a7062e Mon Sep 17 00:00:00 2001
From: MaxymGorn <maximus56132@gmail.com>
Date: Wed, 15 Nov 2023 19:58:00 +0200
Subject: [PATCH 2/2] fix style

---
 .../Client/Pages/BasicUsage/BasicCropperUsagePage.razor         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
index a8c47afb..8f54c225 100644
--- a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
+++ b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
@@ -78,7 +78,7 @@
         <DocsPageSection>
             <SectionHeader Title="Load cross-origin image">
                 <Description>
-                    A cross origin image with a <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</MudLink> attribute and an available Access-Control-Allow-Origin response header can be cropped by Cropper.Blazor.
+                    A cross origin image with a <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</MudLink> attribute and an available Access-Control-Allow-Origin response header can be cropped by <span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span>.
                     If you try to start cropper on a cross-origin image, please make sure that your browser supports
                     <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">HTML5 CORS settings attributes</MudLink>,
                     and your image server supports the Access-Control-Allow-Origin option (see the <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</MudLink>).