Feature/add cross-origin image loading example (#265)

## Target
<!--
  Why are you making this change?
 -->
Add cross-origin image loading example
#### 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
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] 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.
-->

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>

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
+        {
+
+        };
+    }
+}