diff --git a/blazor-toc.html b/blazor-toc.html index cc2eb10375..04a193af95 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3281,6 +3281,7 @@
  • Reset an image
  • Clear an Image
  • Render Dialog in Image Editor
  • +
  • Fit Image to Editor Width and Height
  • 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 new file mode 100644 index 0000000000..81fbf597cb --- /dev/null +++ b/blazor/image-editor/how-to/fit-to-width-and-height.md @@ -0,0 +1,76 @@ +--- +layout: post +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 +documentation: ug +--- + +# Fit Image to Editor Width and Height + +The Image Editor's [ZoomAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ZoomAsync_System_Double_Syncfusion_Blazor_ImageEditor_ImageEditorPoint_) method to fit an image to the editor by width or height. Programmatically increase the zoom level until the image dimension matches the editor container's width or height. + +This example demonstrates scenarios that include buttons for fitting the image to its width (Fit Width) or height (Fit Height). + +```cshtml +@using Syncfusion.Blazor.ImageEditor +@using Syncfusion.Blazor.Buttons + + + +
    + Fit Width + Fit Height +
    +@code { + SfImageEditor ImageEditor; + private async void OpenAsync() + { + await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); + } + private async void FitWidth() + { + await ImageEditor.ZoomAsync(1); // Reset zoom to original size before applying Fit Width + ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); + double ContainerWidth = Convert.ToDouble(ImageEditor.Width); + if (Dimension is not null) + { + double ImageWidth = Dimension.Width; + double OldWidth = Dimension.Width; + double ZoomFactor = 0.1; + double NewZoom; + NewZoom = 1; + while (ImageWidth < ContainerWidth) + { + NewZoom++; + ImageWidth = OldWidth + (OldWidth * ZoomFactor); + ZoomFactor += 0.1; + } + await ImageEditor.ZoomAsync(NewZoom); + } + } + private async void FitHeight() + { + await ImageEditor.ZoomAsync(1); // Reset zoom to original size before applying Fit Height + ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); + double ContainerHeight = Convert.ToDouble(ImageEditor.Height); + if (Dimension is not null) + { + double ImageHeight = Dimension.Height; + double OldHeight = Dimension.Height; + double ZoomFactor = 0.1; + double NewZoom = 1; + while (ImageHeight < ContainerHeight) + { + NewZoom++; + ImageHeight = OldHeight + (OldHeight * ZoomFactor); + ZoomFactor += 0.1; + } + await ImageEditor.ZoomAsync(NewZoom); + } + } +} +``` + +![Blazor Image Editor clearing the image](../images/blazor-image-editor-fit-to-width-and-height.jpg) \ No newline at end of file diff --git a/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg b/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg new file mode 100644 index 0000000000..dd184694a1 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg differ