Skip to content

Commit 8d9017d

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6150 from syncfusion-content/961191_blazor
961191: Prepare UG for IE 2025 Vol2 completed features
2 parents 144ea16 + bc14763 commit 8d9017d

File tree

6 files changed

+211
-6
lines changed

6 files changed

+211
-6
lines changed

‎blazor/image-editor/annotation.md

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Im
4949

5050
* transformCollection: Specifies the transform collection of the text annotation.
5151

52+
* underline — Specifies whether the text should be underlined.
53+
54+
* strikethrough — Specifies whether the text should have a strikethrough.
55+
5256
By utilizing the `DrawTextAsync` method with these parameters, you can precisely position and customize text annotations within the image. This provides the flexibility to add labels, captions, or other text elements with specific font styles, sizes, and colors, enhancing the visual presentation and clarity of the image.
5357

5458
Here is an example of adding a text in a button click using `DrawTextAsync` method.
@@ -251,7 +255,159 @@ Here is an example of adding additional font family using the `ImageEditorFontFa
251255
```
252256

253257
![Blazor Image Editor with Custom font family in an image](./images/blazor-image-editor-font.png)
254-
258+
259+
### Formatting Text with Bold, Italic, Underline, and Strikethrough
260+
261+
The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method in the Blazor Image Editor component allows you to insert a text annotation into the image with specific customization options. Applying these styles enhances the text by improving readability and emphasizing key information, where bold increases visual weight to highlight important points, italic adds a slanted emphasis or creative touch, underline draws a line beneath the text for clarity or separation, and strikethrough places a line through text to indicate removal or outdated content. These formatting options enable users to make their annotations more visually distinctive and effective in conveying information
262+
263+
264+
Here is an example of adding a text in a button click using `DrawTextAsync` method.
265+
266+
In the following example, you can using the DrawTextAsync method in the button click event.
267+
268+
```cshtml
269+
@using Syncfusion.Blazor.ImageEditor
270+
@using Syncfusion.Blazor.Buttons
271+
@using Syncfusion.Blazor.SplitButtons
272+
273+
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="330" Width="550" ShowQuickAccessToolbar="false">
274+
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
275+
</SfImageEditor>
276+
<div class="button-toolbar">
277+
<SfButton CssClass="@(IsTextInsterted ? "e-disabled" : "e-primary")" Disabled="@IsTextInsterted" OnClick="AddTextAsync">Add Text</SfButton>
278+
<SfButtonGroup Mode="SelectionMode.Multiple">
279+
<ButtonGroupButton onclick="@BoldAsync" IconCss="e-icons e-bold">
280+
Bold
281+
</ButtonGroupButton>
282+
<ButtonGroupButton onclick="@ItalicAsync" IconCss="e-icons e-italic">
283+
Italic
284+
</ButtonGroupButton>
285+
<ButtonGroupButton onclick="@UnderlineAsync" IconCss="e-icons e-underline">
286+
Underline
287+
</ButtonGroupButton>
288+
<ButtonGroupButton onclick="@StrikethroughAsync" IconCss="e-icons e-strikethrough">
289+
Strikethrough
290+
</ButtonGroupButton>
291+
</SfButtonGroup>
292+
</div>
293+
<style>
294+
.button-toolbar {
295+
display: flex;
296+
align-items: center;
297+
gap: 12px;
298+
flex-wrap: nowrap;
299+
margin-top: 10px;
300+
}
301+
</style>
302+
303+
@code {
304+
SfImageEditor ImageEditor;
305+
Boolean IsTextInsterted = false;
306+
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
307+
308+
private async void OpenAsync()
309+
{
310+
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
311+
}
312+
313+
private async void AddTextAsync()
314+
{
315+
if (!IsTextInsterted)
316+
{
317+
IsTextInsterted = true;
318+
ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
319+
await ImageEditor.DrawTextAsync(Dimension.X.Value, Dimension.Y.Value, "Syncfusion");
320+
}
321+
}
322+
private async void BoldAsync()
323+
{
324+
ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
325+
if (shapes != null && shapes.Length > 0)
326+
{
327+
var shape = shapes[0];
328+
var fontStyles = shape.FontStyle?.ToList();
329+
330+
if (fontStyles.Contains("bold"))
331+
{
332+
fontStyles.Remove("bold");
333+
}
334+
else
335+
{
336+
fontStyles.Add("bold");
337+
}
338+
339+
shape.FontStyle = fontStyles.ToArray();
340+
await ImageEditor.UpdateShapeAsync(shapes[0]);
341+
}
342+
}
343+
private async void ItalicAsync()
344+
{
345+
ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
346+
if (shapes != null && shapes.Length > 0)
347+
{
348+
var shape = shapes[0];
349+
var fontStyles = shape.FontStyle?.ToList();
350+
351+
if (fontStyles.Contains("italic"))
352+
{
353+
fontStyles.Remove("italic");
354+
}
355+
else
356+
{
357+
fontStyles.Add("italic");
358+
}
359+
360+
shape.FontStyle = fontStyles.ToArray();
361+
await ImageEditor.UpdateShapeAsync(shapes[0]);
362+
}
363+
}
364+
private async void UnderlineAsync()
365+
{
366+
ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
367+
if (shapes != null && shapes.Length > 0)
368+
{
369+
var shape = shapes[0];
370+
var fontStyles = shape.FontStyle?.ToList();
371+
372+
if (fontStyles.Contains("underline"))
373+
{
374+
fontStyles.Remove("underline");
375+
}
376+
else
377+
{
378+
fontStyles.Add("underline");
379+
}
380+
381+
shape.FontStyle = fontStyles.ToArray();
382+
await ImageEditor.UpdateShapeAsync(shapes[0]);
383+
}
384+
}
385+
private async void StrikethroughAsync()
386+
{
387+
ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
388+
if (shapes != null && shapes.Length > 0)
389+
{
390+
var shape = shapes[0];
391+
var fontStyles = shape.FontStyle?.ToList();
392+
393+
if (fontStyles.Contains("strikethrough"))
394+
{
395+
fontStyles.Remove("strikethrough");
396+
}
397+
else
398+
{
399+
fontStyles.Add("strikethrough");
400+
}
401+
402+
shape.FontStyle = fontStyles.ToArray();
403+
await ImageEditor.UpdateShapeAsync(shapes[0]);
404+
}
405+
}
406+
}
407+
```
408+
409+
![Blazor Image Editor with Draw text an image](./images/blazor-image-editor-formatting-text.png)
410+
255411
## Freehand drawing
256412

257413
The Freehand Draw annotation tool in the Blazor Image Editor component is a versatile feature that allows users to draw and sketch directly on the image using mouse or touch input. This tool provides a flexible and creative way to add freehand drawings or annotations to the image.

‎blazor/image-editor/end-user-capabilities.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ To open an image in the image editor, do the following steps.
1717

1818
* Click the Open icon from the left side of the toolbar.
1919

20-
* The file explorer lists only JPEG, PNG, JPG, and WEBP format files.
20+
* The file explorer lists only JPEG, PNG, JPG, WEBP and BMP format files.
2121

2222
* Select the image from the list of the images from the file explorer window.
2323

‎blazor/image-editor/image-restrictions.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ documentation: ug
1111

1212
The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience.
1313

14-
`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, and .webp extensions, without any file size restrictions.
14+
`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions.
1515

1616
## Allowed image extensions
1717

18-
The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, and `.webp` and `.svg` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .webp, and .svg extensions.
18+
The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`, `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions.
1919

2020
`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string.
2121

‎blazor/image-editor/images/blazor-image-editor-custom-height-width.png

60.5 KB
Loading

‎blazor/image-editor/images/blazor-image-editor-formatting-text.png

79 KB
Loading

‎blazor/image-editor/open-save.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-im
1414

1515
## Supported image formats
1616

17-
The Image Editor control supports three common image formats: PNG, JPEG, SVG, and WEBP. These formats allow you to work with a wide range of image files within the Image Editor.
17+
The Image Editor control supports five common image formats: PNG, JPEG, SVG, WEBP and BMP. These formats allow you to work with a wide range of image files within the Image Editor.
1818

1919
When it comes to saving the edited image, the default file type is set as PNG. This means that when you save the edited image without specifying a different file type, it will be saved as a PNG file. However, it's important to note that the Image Editor typically provides options or methods to specify a different file type if desired. This allows you to save the edited image in formats other than the default PNG, such as JPEG, SVG, and WEBP based on your specific requirements or preferences.
2020

@@ -418,6 +418,55 @@ You can utilize the [`FileOpenEventArgs`](https://help.syncfusion.com/cr/blazor/
418418
```
419419
![Blazor Image Editor with Adding Watermark](./images/blazor-image-editor-add-watermark.jpeg)
420420

421+
### Opening Images with Custom Width and Height
422+
423+
Users can now open images with specific width and height values using the optional parameters in 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. This enhancement introduces three optional parameters: `width`, `height`, and `isAspectRatio`These options allow precise control over the image dimensions, with the flexibility to preserve the original aspect ratio if needed. This feature is especially useful when rendering high-resolution images or when fitting images into fixed-size layouts or canvas areas.
424+
425+
The following behaviors are supported through these properties:
426+
- Contains behavior: By specifying only one dimension (either `width` or `height`) and enabling `isAspectRatio`, the other dimension is automatically calculated to maintain the image’s original proportions.
427+
- Cover behavior: When both `width` and `height` are specified with `isAspectRatio` set to `true`, the image scales proportionally to fit within the given dimensions while preserving its aspect ratio.
428+
- Stretch or Shrink behavior: Setting `isAspectRatio` to `false` forces the image to strictly follow the specified `width` and `height`, allowing it to stretch or shrink regardless of its original aspect ratio.
429+
430+
The following example showcases how all three behaviors can be achieved using the OpenAsync method.
431+
432+
```cshtml
433+
@using Syncfusion.Blazor.ImageEditor
434+
@using Syncfusion.Blazor.Buttons
435+
436+
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="330" Width="550">
437+
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
438+
</SfImageEditor>
439+
<div style="display: flex; gap: 12px; margin-top: 10px">
440+
<SfButton CssClass="e-primary" OnClick="ContainsAsync">Fit to Width (Aspect Ratio)</SfButton>
441+
<SfButton CssClass="e-primary" OnClick="CoverAsync">Cover (Aspect Ratio)</SfButton>
442+
<SfButton CssClass="e-primary" OnClick="StretchAsync">Stretch / Shrink</SfButton>
443+
</div>
444+
@code {
445+
SfImageEditor ImageEditor;
446+
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
447+
448+
private async void OpenAsync()
449+
{
450+
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
451+
}
452+
453+
private async void ContainsAsync()
454+
{
455+
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 550, -1, true);
456+
}
457+
private async void CoverAsync()
458+
{
459+
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 550, 550, true);
460+
}
461+
private async void StretchAsync()
462+
{
463+
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 330, 330, false);
464+
}
465+
}
466+
```
467+
468+
![Blazor Image Editor with Opening an image](./images/blazor-image-editor-custom-height-width.png)
469+
421470
## Save as image
422471

423472
The [`ExportAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_System_Double_) method in the Blazor Image Editor component is used to save the modified image as an image, and it accepts a file name and file type as parameters. The file type parameter supports PNG, JPEG, SVG, and WEBP the default file type is PNG. Users are allowed to save an image with a specified file name, file type, and image quality. This enhancement provides more control over the output, ensuring that users can save their work exactly as they need it.
@@ -678,7 +727,7 @@ The [`FileOpened`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Image
678727

679728
[`FileName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileName): This argument is a string that contains the file name of the opened image. It represents the name of the file that was selected or provided when loading the image into the Image Editor.
680729

681-
[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType): This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, SVG, and WEBP.
730+
[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType): This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, SVG, WEBP and BMP.
682731

683732
By accessing these arguments within the `FileOpened` event handler, you can retrieve information about the loaded image, such as its file name and file type. This can be useful for performing additional actions or implementing logic based on the specific image that was opened in the Image Editor component.
684733

0 commit comments

Comments
 (0)