|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: End-user capabilities with Blazor Image Editor Component | Syncfusion |
4 | | -description: Checkout the end-user capabilities available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. |
| 4 | +description: Explore end-user capabilities in the Blazor Image Editor component for Blazor Server and WebAssembly applications. |
5 | 5 | platform: Blazor |
6 | 6 | control: Image Editor |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # End-user capabilities in the Blazor Image Editor component |
11 | 11 |
|
12 | | -The following operations are available for end-users and the same is explained briefly in these sections. |
| 12 | +The following operations are available for end users and are outlined in the sections below. |
13 | 13 |
|
14 | 14 | ## Open an image |
15 | 15 |
|
16 | | -To open an image in the image editor, do the following steps. |
| 16 | +To open an image in the image editor, follow these steps: |
17 | 17 |
|
18 | | -* Click the Open icon from the left side of the toolbar. |
| 18 | +* Click the Open icon on the left side of the toolbar. |
19 | 19 |
|
20 | | -* The file explorer lists only JPEG, PNG, JPG, WEBP and BMP format files. |
| 20 | +* The file explorer lists only JPEG, PNG, JPG, WEBP, and BMP files. |
21 | 21 |
|
22 | | -* Select the image from the list of the images from the file explorer window. |
| 22 | +* Select an image from the file explorer to load it in the editor. |
23 | 23 |
|
24 | 24 |  |
25 | 25 |
|
26 | 26 | ## Zooming |
27 | 27 |
|
28 | | -Image zooming can be performed in the following ways. |
| 28 | +Image zooming can be performed in the following ways: |
29 | 29 |
|
30 | | -* Using toolbar. |
| 30 | +* Using the toolbar |
31 | 31 |
|
32 | | -* Using pinch zoom in touch enabled devices. |
| 32 | +* Using pinch zoom on touch-enabled devices |
33 | 33 |
|
34 | | -* Using mouse wheel. |
| 34 | +* Using the mouse wheel |
35 | 35 |
|
36 | | -* Using keyboard. |
| 36 | +* Using the keyboard |
37 | 37 |
|
38 | 38 |  |
39 | 39 |
|
40 | 40 | ### Using toolbar |
41 | 41 |
|
42 | | -To zoom in or out the image in the image editor, do the following steps. |
| 42 | +To zoom the image using the toolbar: |
43 | 43 |
|
44 | | -* The Zoom In/ Out option only enabled after opening the image. |
| 44 | +* Zoom In/Out options are enabled after opening an image. |
45 | 45 |
|
46 | 46 | ### Using pinch |
47 | 47 |
|
48 | | -To zoom in or out the image in the image editor, do the following steps. |
| 48 | +To zoom the image using touch gestures: |
49 | 49 |
|
50 | | -* Touch with two fingers to perform zooming. |
| 50 | +* Perform a two-finger pinch gesture to zoom in or out. |
51 | 51 |
|
52 | | -* Zoom in and out controlled by touch gestures. |
| 52 | +* Zoom level is controlled by the pinch distance. |
53 | 53 |
|
54 | 54 | ### Using mouse wheel |
55 | 55 |
|
56 | | -To zoom in or out the image in the image editor, do the following steps. |
| 56 | +To zoom the image using the mouse: |
57 | 57 |
|
58 | | -* Press the ctrl key and scroll the mouse wheel to perform zooming. |
| 58 | +* Press Ctrl and scroll the mouse wheel to zoom in or out. |
59 | 59 |
|
60 | | -* The zoom in and out controlled by the mouse wheel. |
| 60 | +* Zoom level is adjusted based on the scroll direction. |
61 | 61 |
|
62 | 62 | ### Using keyboard |
63 | 63 |
|
64 | | -To zoom in or out the image in the image editor, do the following steps. |
| 64 | +To zoom the image using keyboard shortcuts: |
65 | 65 |
|
66 | | -* Press the ctrl key with ‘+’ button from the keyboard to zoom in an image. |
| 66 | +* Press Ctrl + ‘+’ to zoom in. |
67 | 67 |
|
68 | | -* Press the ctrl key with ‘-’ button from the keyboard to zoom out an image. |
| 68 | +* Press Ctrl + ‘−’ to zoom out. |
69 | 69 |
|
70 | 70 | ## Panning |
71 | 71 |
|
72 | | -To pan an image in the image editor, do the following steps. |
| 72 | +To pan the image in the editor: |
73 | 73 |
|
74 | | -* Click on the image and do dragging to move or pan the image. |
| 74 | +* Click and drag on the image to move it within the canvas. |
75 | 75 |
|
76 | | -* Panning option will be enabled in the following two cases. |
| 76 | +* Panning is enabled in the following cases: |
77 | 77 |
|
78 | | - * If the selection is applied for cropping an image. |
| 78 | + * When a selection is active for cropping. |
79 | 79 |
|
80 | | - * If the image size exceeds the canvas size while zooming an image. |
| 80 | + * When the image size exceeds the canvas size due to zooming. |
81 | 81 |
|
82 | 82 |  |
83 | 83 |
|
84 | 84 | ## Cropping and image transformation |
85 | 85 |
|
86 | | -To crop an image in the image editor, do the following steps. |
| 86 | +To crop and transform an image: |
87 | 87 |
|
88 | | -* Cropping can be performed based on the selection in an image editor. |
| 88 | +* Cropping is based on a selection within the editor. |
89 | 89 |
|
90 | | -* To perform selection, click the crop button in the toolbar which opens the contextual toolbar that shows crop selection options, rotate options, flip options, and straightening options. |
| 90 | +* Click the Crop button on the toolbar to open the contextual toolbar with crop selection, rotate, flip, and straighten options. |
91 | 91 |
|
92 | | -* Click the crop selection button and select the type of selection such as custom, circle, square, and ratio selection from the popup. |
| 92 | +* Click the crop selection button and choose a selection type: custom, circle, square, or ratio. |
93 | 93 |
|
94 | | -* Once selection is completed, do panning to move the image to get the cropped region. |
| 94 | +* After creating a selection, pan the image to position the desired crop region. |
95 | 95 |
|
96 | | -* Utilize the rotate and flip buttons along with the straighten slider to perform image transformations, including any inserted annotations. |
| 96 | +* Use rotate and flip buttons and the straighten slider to apply transformations, including to inserted annotations. |
97 | 97 |
|
98 | | -* Once the cropping region is finalized in the image click the tick icon at the top right of the toolbar to crop the image. |
| 98 | +* When the crop region is finalized, click the tick icon at the top-right of the toolbar to apply the crop. |
99 | 99 |
|
100 | 100 |  |
101 | 101 |
|
102 | 102 | ## Image annotation |
103 | 103 |
|
104 | | -To add annotations to an image in the image editor, do the following steps. |
| 104 | +To add and modify annotations: |
105 | 105 |
|
106 | | -* To add annotation, click the annotation button in the toolbar and select the type of annotations such as Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand drawing to be inserted to the image editor. |
| 106 | +* Click the annotation button on the toolbar and choose an annotation type: Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand Drawing. |
107 | 107 |
|
108 | | -* Once the annotation is added to the image, that can be repositioned by clicking and dragging the annotations using mouse as well as resized by clicking and resizing the selection circle to be placed around the annotations. |
| 108 | +* Click and drag on the image to draw the selected annotation. |
109 | 109 |
|
110 | | -* To rotate annotations, you can simply grab the circle located at the bottom of the annotation. The rotation can be applicable to all the annotations except text annotation. |
| 110 | +* After insertion, annotations can be repositioned by clicking and dragging with the mouse, and resized by interacting with the selection circle placed around the annotation. |
111 | 111 |
|
112 | | -* Customize the annotations by changing their color, stroke width, font family, and font size through the contextual toolbar. The contextual toolbar will be enabled whenever the annotations are selected. |
| 112 | +* To rotate an annotation, drag the circle at the bottom of the annotation. |
113 | 113 |
|
114 | | -* When annotations are selected in the image editor, the quick access toolbar becomes active, providing convenient access to various actions such as duplicating, deleting, or editing text associated with the selected annotation. This toolbar enables users to perform these common operations quickly and efficiently, streamlining their workflow and enhancing the overall editing experience. |
| 114 | +* Customize annotations using the contextual toolbar: color, stroke width, font family, and font size. The contextual toolbar appears when an annotation is selected. |
| 115 | + |
| 116 | +* When annotations are selected, the quick access toolbar enables common actions such as duplicate, delete, and edit text to streamline editing. |
115 | 117 |
|
116 | 118 |  |
117 | 119 |
|
118 | | -## Filtering and fine-tune |
| 120 | +## Fine-tune |
119 | 121 |
|
120 | | -To perform fine-tuning on an image in the image editor, do the following steps. |
| 122 | +To apply fine-tuning adjustments: |
121 | 123 |
|
122 | | -* Click the fine-tune button which displays the list of fine-tuning available in the image editor. |
| 124 | +* Click the Fine-tune button to display available adjustments. |
123 | 125 |
|
124 | | -* Click one of the fine-tune options from the list of options which shows a slider to adjust the corresponding filter. |
| 126 | +* Choose an adjustment to display a slider for control. |
125 | 127 |
|
126 | | -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. |
| 128 | +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. |
127 | 129 |
|
128 | 130 |  |
129 | 131 |
|
130 | | -To apply filters on an image in the image editor, do the following steps. |
| 132 | +## Filter |
| 133 | + |
| 134 | +To apply filters: |
131 | 135 |
|
132 | | -* Click the filter button which displays the list of filters available in the image editor. |
| 136 | +* Click the Filter button to display available filters. |
133 | 137 |
|
134 | | -* Click the filter from list of options to apply the corresponding filter to an image. |
| 138 | +* Select a filter to apply it to the image. |
135 | 139 |
|
136 | | -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. |
| 140 | +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. |
137 | 141 |
|
138 | 142 |  |
139 | 143 |
|
140 | 144 | ## Undo and redo the operations |
141 | 145 |
|
142 | | -To undo and redo the actions performed in an image editor, do the following steps. |
| 146 | +To undo and redo actions in the editor: |
143 | 147 |
|
144 | | -* The undo button will be enabled once the action is performed in an image editor. |
| 148 | +* The Undo button is enabled after an action is performed. |
145 | 149 |
|
146 | | -* The redo button will be enabled once the undo action is performed in an image editor. |
| 150 | +* The Redo button is enabled after an undo action is performed. |
147 | 151 |
|
148 | | -* Click the undo or redo button at the left side of the toolbar to perform undo and redo operation. |
| 152 | +* Click the Undo or Redo button on the left side of the toolbar. |
149 | 153 |
|
150 | | -* Ctrl + Z and Ctrl + Y facilitates this process by allowing users to undo and redo actions, respectively. |
| 154 | +* Keyboard shortcuts: Ctrl + Z (undo) and Ctrl + Y (redo). |
151 | 155 |
|
152 | 156 |  |
153 | 157 |
|
154 | 158 | ## Reset an image |
155 | 159 |
|
156 | | -To revert all the changes done in an image editor, do the following steps. |
| 160 | +To revert all changes in the editor: |
157 | 161 |
|
158 | | -* Click the reset button which is located on the right side of the toolbar. |
| 162 | +* Click the Reset button on the right side of the toolbar. |
159 | 163 |
|
160 | | -* This will revert all the changes performed in the image editor. |
| 164 | +* This action reverts all modifications applied in the editor. |
161 | 165 |
|
162 | 166 | ## Export an image |
163 | 167 |
|
164 | 168 | To save the modified image in the Image Editor, follow these steps: |
165 | 169 |
|
166 | | -* Click the Save Button |
167 | | - * Locate the Save button on the right side of the toolbar and click it. |
| 170 | +* Click the Save button |
| 171 | + * Locate the Save button on the right side of the toolbar and click it. |
168 | 172 |
|
169 | | -* Select the File Format |
170 | | - * In the export popup, choose your preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all |
171 | | -applied modifications. |
| 173 | +* Select the file format |
| 174 | + * In the export popup, choose the preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all applied modifications. |
172 | 175 |
|
173 | | -* Adjust Image Quality (JPEG Format Only) |
174 | | - * If saving in JPEG, use the Image Quality slider to set the desired quality level (0-100). A higher value retains more detail but increases file size. |
| 176 | +* Adjust image quality (JPEG only) |
| 177 | + * If saving as JPEG, use predefined settings (Good, Great, Highest) or use the Image Quality slider (0–100). Higher values retain more detail and increase file size. |
175 | 178 |
|
176 | | -* Download the Image |
177 | | - * Click Download to save the modified image to your device. |
| 179 | +* Download the image |
| 180 | + * Click Download to save the modified image. |
178 | 181 |
|
179 | | -* Use Keyboard Shortcut (Ctrl + S) |
180 | | - * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. |
| 182 | +* Use keyboard shortcut (Ctrl + S) |
| 183 | + * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. |
181 | 184 |
|
182 | 185 |  |
0 commit comments