Merge branch 'dev' into feature/add_dotnet_8_support

CropperBlazor · Nov 16, 2023 · 84637e4 · 84637e4
2 parents 1726578 + f8f16b5
commit 84637e4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git 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 <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>).
+                    <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
@@ -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
+        {
+
+        };
+    }
+}