From ec6bd1d4a3ed1319bb129109fbb2595d0f4d24a9 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 23 Jun 2026 17:05:43 +0530 Subject: [PATCH] 1034381 - Removed the word syncfusion from Image Editor topic --- blazor/image-editor/accessibility.md | 4 +-- blazor/image-editor/annotation.md | 2 +- blazor/image-editor/end-user-capabilities.md | 2 +- blazor/image-editor/filter.md | 2 +- blazor/image-editor/finetune.md | 2 +- blazor/image-editor/frame.md | 2 +- .../getting-started-with-server-app.md | 26 ++++++++--------- .../getting-started-with-web-app.md | 24 ++++++++-------- blazor/image-editor/getting-started.md | 28 +++++++++---------- blazor/image-editor/how-to/clear-image.md | 2 +- .../how-to/fit-to-width-and-height.md | 2 +- blazor/image-editor/how-to/render-dialog.md | 2 +- blazor/image-editor/how-to/reset.md | 2 +- blazor/image-editor/image-restrictions.md | 2 +- blazor/image-editor/localization.md | 4 +-- blazor/image-editor/open-save.md | 10 +++---- blazor/image-editor/quick-access.md | 2 +- blazor/image-editor/redact.md | 2 +- blazor/image-editor/resize.md | 2 +- blazor/image-editor/selection-cropping.md | 2 +- blazor/image-editor/toolbar.md | 2 +- blazor/image-editor/transform.md | 2 +- blazor/image-editor/undo-redo.md | 2 +- blazor/image-editor/z-order.md | 2 +- 24 files changed, 66 insertions(+), 66 deletions(-) diff --git a/blazor/image-editor/accessibility.md b/blazor/image-editor/accessibility.md index 5ddd50d833..eaac217f6b 100644 --- a/blazor/image-editor/accessibility.md +++ b/blazor/image-editor/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Blazor Image Editor component | Syncfusion +title: Accessibility in Blazor Image Editor component | Syncfusion® description: Learn about accessibility support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor @@ -61,4 +61,4 @@ The accessibility compliance of the Blazor Image Editor component is demonstrate ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/image-editor/annotation.md b/blazor/image-editor/annotation.md index 2136a03100..1312030e02 100644 --- a/blazor/image-editor/annotation.md +++ b/blazor/image-editor/annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: Annotation with Blazor Image Editor Component | Syncfusion +title: Annotation with Blazor Image Editor Component | Syncfusion® description: Explore annotation features in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/end-user-capabilities.md b/blazor/image-editor/end-user-capabilities.md index 567d6e0c30..15d1f0041f 100644 --- a/blazor/image-editor/end-user-capabilities.md +++ b/blazor/image-editor/end-user-capabilities.md @@ -1,6 +1,6 @@ --- layout: post -title: End-user capabilities with Blazor Image Editor Component | Syncfusion +title: End-user capabilities with Blazor Image Editor Component | Syncfusion® description: Explore end-user capabilities in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/filter.md b/blazor/image-editor/filter.md index 58002d84e5..f45eaa5706 100644 --- a/blazor/image-editor/filter.md +++ b/blazor/image-editor/filter.md @@ -1,6 +1,6 @@ --- layout: post -title: Filter with Blazor Image Editor Component | Syncfusion +title: Filter with Blazor Image Editor Component | Syncfusion® description: Explore image filter options in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/finetune.md b/blazor/image-editor/finetune.md index 40a55b5698..ff4e1dca26 100644 --- a/blazor/image-editor/finetune.md +++ b/blazor/image-editor/finetune.md @@ -1,6 +1,6 @@ --- layout: post -title: Fine-tune with Blazor Image Editor Component | Syncfusion +title: Fine-tune with Blazor Image Editor Component | Syncfusion® description: Discover the Finetune feature available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/frame.md b/blazor/image-editor/frame.md index 8f3c7c2254..21ef475887 100644 --- a/blazor/image-editor/frame.md +++ b/blazor/image-editor/frame.md @@ -1,6 +1,6 @@ --- layout: post -title: Frame with Blazor Image Editor Component | Syncfusion +title: Frame with Blazor Image Editor Component | Syncfusion® description: Explore the Frame feature in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/getting-started-with-server-app.md b/blazor/image-editor/getting-started-with-server-app.md index 059e6f3690..95095b709a 100644 --- a/blazor/image-editor/getting-started-with-server-app.md +++ b/blazor/image-editor/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion Blazor ImageEditor in Server App -description: Learn how to add and configure the Syncfusion Blazor Image Editor component in a Blazor Server App using Visual Studio or Visual Studio Code. +title: Getting Started with Blazor ImageEditor in Server App | Syncfusion® +description: Learn how to add and configure the Blazor Image Editor component in a Blazor Server App using Visual Studio or Visual Studio Code. platform: Blazor component: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Image Editor Component in Server App -This section briefly explains about how to include [Syncfusion® Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua ## Create a new Blazor App in Visual Studio Code -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -113,9 +113,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +Register the Blazor service in the **Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -143,9 +143,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. -## Add Syncfusion® Blazor Image Editor component +## Add Blazor Image Editor component -Add the Syncfusion® Blazor Image Editor component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Add the Blazor Image Editor component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. @@ -168,11 +168,11 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Image Editor component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Blazor Image Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Image Editor Component](./images/blazor-image-editor-component.jpg)" %} ## See also -1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/image-editor/getting-started-with-web-app.md b/blazor/image-editor/getting-started-with-web-app.md index 4caf3832fb..ea5b02e050 100644 --- a/blazor/image-editor/getting-started-with-web-app.md +++ b/blazor/image-editor/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion Blazor Image Editor in Blazor Web App -description: Learn how to add and configure the Syncfusion Blazor Image Editor component in a Blazor Web App using Visual Studio or Visual Studio Code. +title: Getting Started with Image Editor in Blazor Web App | Syncfusion® +description: Learn how to add and configure the Blazor Image Editor component in a Blazor Web App using Visual Studio or Visual Studio Code. platform: Blazor component: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Image Editor Component in Blazor Web App -This section briefly explains about how to include the [Syncfusion® Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). To get started quickly with the Blazor Image Editor component, refer to this video or the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/imageEditor) sample: @@ -25,7 +25,7 @@ To get started quickly with the Blazor Image Editor component, refer to this vid ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -37,7 +37,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): @@ -89,7 +89,7 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install the [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. @@ -128,9 +128,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor Service in the **Program.cs** file of your Blazor Web App. +Register the Blazor Service in the **Program.cs** file of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -144,7 +144,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. ## Add stylesheet and script resources @@ -160,7 +160,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Image Editor component +## Add Blazor Image Editor component * Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Image Editor component inside the razor file. * If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -200,5 +200,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/image-editor/getting-started.md b/blazor/image-editor/getting-started.md index ff4b25e3c3..13a980cc79 100644 --- a/blazor/image-editor/getting-started.md +++ b/blazor/image-editor/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Blazor Image Editor Component | Syncfusion -description: Learn how to add and configure the Syncfusion Blazor Image Editor component in a Blazor WebAssembly App using Visual Studio or Visual Studio Code. +title: Getting Started with Blazor Image Editor Component | Syncfusion® +description: Learn how to add and configure the Blazor Image Editor component in a Blazor WebAssembly App using Visual Studio or Visual Studio Code. platform: Blazor control: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Image Editor Component -This section briefly explains how to include [Syncfusion® Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). @@ -81,7 +81,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.ImageEditor](https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -111,9 +111,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -141,9 +141,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Syncfusion® Blazor Image Editor component +## Add Blazor Image Editor component -Add the Syncfusion® Blazor Image Editor component in the **~/Pages/Index.razor** file. +Add the Blazor Image Editor component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="~/Index.razor" %} @@ -155,7 +155,7 @@ Add the Syncfusion® Blazor Image Editor com {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the app. This renders the Syncfusion® Blazor Image Editor component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the app. This renders the Blazor Image Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Image Editor Component](./images/blazor-image-editor-component.jpg)" %} @@ -163,8 +163,8 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting started with Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting started with Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor. diff --git a/blazor/image-editor/how-to/clear-image.md b/blazor/image-editor/how-to/clear-image.md index bf4a911539..edb1640db5 100644 --- a/blazor/image-editor/how-to/clear-image.md +++ b/blazor/image-editor/how-to/clear-image.md @@ -1,6 +1,6 @@ --- layout: post -title: Clear an Image with Blazor Image Editor Component | Syncfusion +title: Clear an Image with Blazor Image Editor Component | Syncfusion® description: Learn how to clear an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/how-to/fit-to-width-and-height.md b/blazor/image-editor/how-to/fit-to-width-and-height.md index 81fbf597cb..d13a724478 100644 --- a/blazor/image-editor/how-to/fit-to-width-and-height.md +++ b/blazor/image-editor/how-to/fit-to-width-and-height.md @@ -1,6 +1,6 @@ --- layout: post -title: Fit to Width and Height with Blazor Image Editor | Syncfusion +title: Fit to Width and Height with Blazor Image Editor | Syncfusion® description: Learn how to fit to width and height in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/how-to/render-dialog.md b/blazor/image-editor/how-to/render-dialog.md index 0eb0ac9f2b..aa31c76032 100644 --- a/blazor/image-editor/how-to/render-dialog.md +++ b/blazor/image-editor/how-to/render-dialog.md @@ -1,6 +1,6 @@ --- layout: post -title: Render Image Editor in a Dialog Component | Syncfusion +title: Render Image Editor in a Dialog Component | Syncfusion® description: Render the Blazor Image Editor in a modal dialog for a focused, space-saving editing experience in Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/how-to/reset.md b/blazor/image-editor/how-to/reset.md index 5891d76c55..9a6e2f7c7d 100644 --- a/blazor/image-editor/how-to/reset.md +++ b/blazor/image-editor/how-to/reset.md @@ -1,6 +1,6 @@ --- layout: post -title: Reset an image in the Blazor Image Editor | Syncfusion +title: Reset an image in the Blazor Image Editor | Syncfusion® description: Learn how to reset an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md index efe53d636f..9828faf4f7 100644 --- a/blazor/image-editor/image-restrictions.md +++ b/blazor/image-editor/image-restrictions.md @@ -1,6 +1,6 @@ --- layout: post -title: Image Restrictions with Blazor Image Editor Component | Syncfusion +title: Image Restrictions with Blazor Image Editor | Syncfusion® description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/localization.md b/blazor/image-editor/localization.md index bad0747e6b..e69b64c017 100644 --- a/blazor/image-editor/localization.md +++ b/blazor/image-editor/localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Localization with Blazor Image Editor Component | Syncfusion +title: Localization with Blazor Image Editor Component | Syncfusion® description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor @@ -9,6 +9,6 @@ documentation: ug # Localization in the Blazor Image Editor component -The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Blazor components. N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor. \ No newline at end of file diff --git a/blazor/image-editor/open-save.md b/blazor/image-editor/open-save.md index b1ecf37b70..acef0317d2 100644 --- a/blazor/image-editor/open-save.md +++ b/blazor/image-editor/open-save.md @@ -1,6 +1,6 @@ --- layout: post -title: Open save with Blazor Image Editor Component | Syncfusion +title: Open save with Blazor Image Editor Component | Syncfusion® description: Learn how to open, edit, and save images in the Blazor Image Editor component in Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor @@ -338,7 +338,7 @@ Images can be opened in the Image Editor using the File Manager. After selecting ### Open an image from Treeview -Images can be opened in the Syncfusion® Image Editor by selecting a node from a tree view. When an image node is selected, the corresponding image is loaded into the editor using the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. +Images can be opened in the Blazor Image Editor by selecting a node from a tree view. When an image node is selected, the corresponding image is loaded into the editor using the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. ```cshtml @using Syncfusion.Blazor.Navigations @@ -538,7 +538,7 @@ In the following example, the `ExportAsync` method is invoked on a button click. ### Save the image as base64 format -To save an image as base64, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a Data URL containing the base64-encoded string. By invoking the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Syncfusion® Image Editor instance, this Data URL can be loaded into the editor. The resulting base64 string can be embedded in HTML or CSS or transmitted over data channels without relying on an external file. +To save an image as base64, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a Data URL containing the base64-encoded string. By invoking the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Blazor Image Editor instance, this Data URL can be loaded into the editor. The resulting base64 string can be embedded in HTML or CSS or transmitted over data channels without relying on an external file. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -576,7 +576,7 @@ To save an image as base64, use the [GetImageDataUrlAsync](https://help.syncfusi ### Save the image as byte[] -To save an image as a byte array, use the [GetImageDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataAsync) method of the editor to retrieve a byte array. Then invoke the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. +To save an image as a byte array, use the [GetImageDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataAsync) method of the editor to retrieve a byte array. Then invoke the [OpenAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method on the Blazor Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -620,7 +620,7 @@ To save an image as a byte array, use the [GetImageDataAsync](https://help.syncf ### Save the image as Blob -To save an image as a blob, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a blob. Then invoke the open method on the Syncfusion® Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. +To save an image as a blob, use the [GetImageDataUrlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetImageDataUrlAsync_System_Boolean_) method of the editor to retrieve the image data and convert it into a blob. Then invoke the open method on the Blazor Image Editor instance to load this byte array into the editor. The resulting byte array can be stored in a database for data management and maintenance. ```cshtml @using Syncfusion.Blazor.ImageEditor diff --git a/blazor/image-editor/quick-access.md b/blazor/image-editor/quick-access.md index 4b9773ce5a..87cb50d080 100644 --- a/blazor/image-editor/quick-access.md +++ b/blazor/image-editor/quick-access.md @@ -1,6 +1,6 @@ --- layout: post -title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion +title: Quick Access Toolbar with Blazor Image Editor | Syncfusion® description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/redact.md b/blazor/image-editor/redact.md index 7533632d49..29c02a576a 100644 --- a/blazor/image-editor/redact.md +++ b/blazor/image-editor/redact.md @@ -1,6 +1,6 @@ --- layout: post -title: Redact with Blazor Image Editor Component | Syncfusion +title: Redact with Blazor Image Editor Component | Syncfusion® description: Explore the Redact support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/resize.md b/blazor/image-editor/resize.md index 03d237bb02..97533287f2 100644 --- a/blazor/image-editor/resize.md +++ b/blazor/image-editor/resize.md @@ -1,6 +1,6 @@ --- layout: post -title: Resizing with Blazor Image Editor Component | Syncfusion +title: Resizing with Blazor Image Editor Component | Syncfusion® description: Explore the resizing support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/selection-cropping.md b/blazor/image-editor/selection-cropping.md index 0836044af8..59a2be8403 100644 --- a/blazor/image-editor/selection-cropping.md +++ b/blazor/image-editor/selection-cropping.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection cropping with Blazor Image Editor Component | Syncfusion +title: Selection cropping with Blazor Image Editor Component | Syncfusion® description: Explore selection cropping in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/toolbar.md b/blazor/image-editor/toolbar.md index c05578fe1d..c7498a8d85 100644 --- a/blazor/image-editor/toolbar.md +++ b/blazor/image-editor/toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Toolbar with Blazor Image Editor Component | Syncfusion +title: Toolbar with Blazor Image Editor Component | Syncfusion® description: Learn about the toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/transform.md b/blazor/image-editor/transform.md index 3699342e7c..2fb6f0a9b3 100644 --- a/blazor/image-editor/transform.md +++ b/blazor/image-editor/transform.md @@ -1,6 +1,6 @@ --- layout: post -title: Transform with Blazor Image Editor Component | Syncfusion +title: Transform with Blazor Image Editor Component | Syncfusion® description: Explore the transform support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/undo-redo.md b/blazor/image-editor/undo-redo.md index d00b1f8534..d7add2f9cb 100644 --- a/blazor/image-editor/undo-redo.md +++ b/blazor/image-editor/undo-redo.md @@ -1,6 +1,6 @@ --- layout: post -title: Undo and Redo with Blazor Image Editor Component | Syncfusion +title: Undo and Redo with Blazor Image Editor Component | Syncfusion® description: Explore undo and redo features in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor diff --git a/blazor/image-editor/z-order.md b/blazor/image-editor/z-order.md index 55db766b69..0475dc96a6 100644 --- a/blazor/image-editor/z-order.md +++ b/blazor/image-editor/z-order.md @@ -1,6 +1,6 @@ --- layout: post -title: Z-order with Blazor Image Editor Component | Syncfusion +title: Z-order with Blazor Image Editor Component | Syncfusion® description: Explore the Z-order support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor