From 95260c83a09c8a8ad9b16f61e5a1659371dabd1e Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 12 Jun 2026 15:05:15 +0530 Subject: [PATCH] 1031625 - 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 356ca62fdf..2fdec46b32 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 55288e0295..f04e8472bf 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 2b63e18317..9ca6d7782c 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 de403c139a..91d45a9252 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 c5a4ca0038..041aa6f0ae 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 ec1073498f..56063798f7 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.webp)" %} ## 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 4a95a7958a..1f417543d6 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.webp)" %} @@ -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 f235cf72e2..5fed234c14 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 3a2e8fa1d0..63fc3d9531 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 7f940d8975..d3e4ea1a87 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 aa1f3a16f6..83624d1e1d 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 c719b9083c..e43b0ee5f7 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 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 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 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 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 b0b388e0fa..19f8f21335 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 8f53f2ad5e..5f4e5c4b91 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 4026b9c86e..4d33a21791 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 41ff94b7a3..d28babf385 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 630cd4958c..6842b01af8 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 e48d289cae..a671c06364 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 ffd299f86c..a2579ec7c0 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 13f69d4cd7..75de36357a 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