ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image Editor control (WINDEV)
  • Overview
  • Special case: Read-only file
  • Ribbon: "Home" tab
  • "General" group
  • "Clipboard" group
  • "Size" group
  • "Drawing" group
  • "Selection" group
  • "Lines" group
  • "Display" group
  • Ribbon: "Other tools" tab
  • "Layers" group
  • "Rotation and symmetry" group
  • "OCR" group
  • "Effects and settings" group
  • "Transformation" group
  • Image editor pane
  • Layer management
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Image Editor control: Options in the ribbon and the panes
Overview
The Image Editor control offers a host of options accessible via:
  • The ribbon. There two tabs:
    • The "Home" tab that includes multiple options for the most common actions on an image.
    • The "Other tools" tab that allows you to perform more complex operations.
  • The editor pane, that is used to easily configure several options.
Remarks: Use the arrows at the top of the ribbon to "Undo or Redo" the desired actions on the Image Editor control.

Special case: Read-only file

When an image is opened in read-only mode, a "Read-only" bar is displayed instead of the Undo/Redo arrows. In this case, only some operations are available.
Read-only
Ribbon: "Home" tab
The "Home" tab includes multiple options to perform the most common operations on an image.
Home tab
This tab contains the following groups:
  • General: Allows you to open, create, save or print an image.
  • Clipboard: Contains different options for the clipboard (copy/paste).
  • Size: Allows you to set the image size.
  • Drawing: Allows you to use drawing tools on the current image or layer.
  • Selection: Allows you to select, move or resize an area on the current layer.
  • Lines: Allows you to define line thickness and color.
  • Display: Allows you to zoom in, display or hide the pane or rulers.

"General" group

The General group allows you to open, create, save or print an image.
General group
You can:
  • Create a new image.
  • Open an existing image.
  • Scan a document. The scan options window appears. In this window, you can select:
    • the desired scanner.
    • the source (scanner glass, feeder, etc.).
    • the color mode (color, grayscale, black and white, etc.).
    • the resolution. You can get a preview of the document and start scanning via the "Preview" and "Scan" buttons, respectively. The result of the scan is displayed in the image editor. The result of the scan replaces the image previously displayed.
  • Save (or save as) an image.
  • Print an image. The print configuration window is displayed (with a preview of the document).
    Print options
    You can configure:
    • the printer properties: Printer name, orientation, print mode, number of copies.
    • the image position in the printed page as well as the margins,
    • the image size.

"Clipboard" group

The Clipboard group allows you to:
Clipboard group
  • manage clipboard features (copy / paste).
    Remark: You can also use the standard shortcuts: Ctrl + C, Ctrl + V, Ctrl + X.
  • take a screenshot: The "Snip" option allows you to select and capture an area of the screen. This capture is added to the current image in a new layer.

"Size" group

The Size group allows you to set the image size.
Size group
You can:
  • Crop the image: This option changes the mouse cursor into a specific tool. To use this tool, select the area you want to keep. The image is automatically cropped.
  • Resize the image: In the window that appears, specify the new size or the percentage to enlarge or reduce the image.
    Resizing

    Remarks:
    • Only the selected layer is resized. Select the "Entire image" layer to resize all layers.
    • Click the chain icon to use non-proportional scaling.
  • Handling the work area: The "Work area" option allows you to:
    • New in version 2024
      resize with mouse (option by Default): Handles are displayed around the work area, allowing you to resize it (in height or width)..
    • display a resize window: In the window that appears, specify:
      growth
    • The new work area size.
    • The image enlargement mode.

"Drawing" group

The Drawing group allows you to use drawing tools on the current image or layer.
Drawing group
  • The "Pencil" tool is used to draw freehand on the current layer. The pencil color and thickness can be selected in the "Lines" group. These characteristics can also be modified in the image editor pane. To use this tool:
    1. Click the "Pencil" tool in the ribbon.
    2. Click the position where you want to start drawing.
    3. Hold the left mouse button down until you have finished drawing.
    The image editor automatically recognizes freehand drawings. Thus, a line, a circle or a rectangle drawn freehand will be automatically recognized and redrawn.
  • The "Line" tool is used to draw a line on the current layer. The line color and thickness can be selected in the "Lines" group. These characteristics can also be modified in the image editor pane. To use this tool:
    1. Click the "Line" tool in the ribbon.
    2. Click the position where you want to start drawing the line.
    3. Hold the left mouse button down until you have finished drawing.
      Remark: If you hold down the Shift key, you will get a perfectly horizontal or vertical line.
  • The "Eraser" tool is used to erase freehand on the current layer. The eraser erases the drawing on the current layer. The eraser thickness is defined in the "Lines" group or in the image editor pane. To use this tool:
    1. Click the "Eraser" tool in the ribbon.
    2. Click the position where you want to start erasing.
    3. Hold the left mouse button down until you have finished erasing.
  • The "Fill" tool is used to fill an area with a color on the current layer. The fill color can be selected in the "Lines" group or in the image editor pane. To use this tool:
    1. Select the area to fill (with the rectangle, the lasso or wand tools for example, available in the "Selection" group).
    2. Click the "Fill" tool in the ribbon.
    3. Click the area to fill. The area is automatically filled.
  • The "Ellipse" tool is used to draw an ellipse or a circle on the current layer. The line and fill color can be selected in the "Lines" group. These characteristics can also be modified in the image editor pane. To use this tool:
    1. Click the "Ellipse" tool in the ribbon.
    2. Click the position where you want to start drawing the ellipse.
      Remark: The ellipse is drawn in an area. The start position of the drawing corresponds to one of the corners of the area in which the ellipse will be drawn.
    3. Hold the left mouse button down until you have finished drawing.
      Remark: If you hold down the Shift key, you will get a perfect circle.
  • The "Rectangle" tool is used to draw a rectangle or a square on the current layer. The line and fill color can be selected in the "Lines" group. These characteristics can also be modified in the image editor pane. To use this tool:
    1. Click the "Rectangle" tool in the ribbon.
    2. Click the position where you want to start drawing the rectangle.
    3. Hold the left mouse button down until you have finished drawing.
      Remark: If you hold down the Shift key, you will get a perfect square.
  • The "Arrow" tool allows you to draw an arrow on the current layer. The arrow color can be selected in the "Lines" group. The image editor pane is used to configure additional features such as arrow size, arrowhead, etc. To use this tool:
    1. Click the "Arrow" tool in the ribbon.
    2. Click the position where you want to start drawing the arrow.
    3. Hold the left mouse button down until you have finished drawing.
      Remark: If you hold down the Shift key, the arrow will be horizontal or vertical.
  • The "Text" tool is used to write a text on the current layer. To use this tool:
    1. Click the "Text" tool in the ribbon.
    2. In the image, create the area where you want to insert the text.
    3. The text box appears, as well as a "Text" tab, which will allow you to format the text:
      Text area
      • Font used and font size,
      • Characteristic features: bold, italic, underline, etc.
      • Background color, text color,
      • Layout (centered, right-aligned, etc.).
    4. Type your text. To exit from the text area, click anywhere on the image.
  • The "Watermark" tool is used to create a new Text layer on the current image. To use this tool:
    1. Click the "Watermark" tool in the ribbon.
    2. Click the position where you want to insert the watermark.
    3. The watermark settings window appears.
      Enter Watermark
      In this window, you can specify:
      • Font, size, color and features (bold, italic, underline).
      • Text color.
      • Text alignment (horizontal and vertical), angle and opacity.
      • Text to display.
      • The "Image preview" option shows a preview of the watermark without validating the window.
    4. Validez. The text layer that contains the watermark is created.
  • The "Blur" tool allows you to blur a part of the image. To use this tool:
    1. Click the "Blur" tool in the ribbon.
    2. Select the area of the image to be blurred.
    3. The blur is automatically applied.
    Remark: If the blur is applied multiple times on the same area, the effect will be intensified.

"Selection" group

The Selection group allows you to select, move and resize an object on the current layer.
Selection group
  • Rectangle: Allows you to select a rectangular area on the current layer. To use this tool:
    1. Click the "Rectangle" tool in the ribbon.
    2. Click the position where you want to start the rectangular selection.
    3. Hold the left mouse button down until you have selected the desired area.
    4. The selection can then be manipulated (moved, filled, etc.)..
  • Lasso: Allows you to make a freehand selection on the current layer. To use this tool:
    1. Click the "Lasso" tool in the ribbon.
    2. Click the position where you want to start the selection.
    3. Hold the left mouse button down until you have finished selecting the desired area. If the end point does not correspond to the start point, the two lasso extremities are automatically linked.
    4. The selection can then be manipulated (moved, filled, etc.)..
  • Wand: Selects an object or area using the existing outlines on the current layer. To use this tool:
    1. Click the "Wand" tool in the ribbon.
    2. Click the object or area you want to select. The corresponding pixels are automatically selected.
      Remark: You can adjust the magic wand tolerance: simply expand the menu of the Wand option.
      Tolerance settings
    3. The selection can then be manipulated (moved, filled, etc.)..
  • Move and resize (Ctrl + T): This option sets the current selection to:
    • move it: all you have to do is move the selection with the mouse,
    • resize it: use the sizing handles around the selection.
      Remark: If you hold the Shift key down when resizing the object or area, the aspect ratio is preserved.
    • rotate: simply move the mouse away from the area handles to display a rotation cursor (double curved arrow). Then, hold the left mouse button down when rotating the object in the desired direction. Releasing the left mouse button validates the rotation.

"Lines" group

The Lines group makes it possible to define various parameters used by the drawing options.
Colors group
You can:
  • select a color via the color picker. The preview of the current color appears below or next to the eyedropper.
  • select a specific color already used in the current image via the eyedropper. Simply click the "Eyedropper" tool in the ribbon and click the desired color in the image.
    Remark: The color is displayed in a preview box below the eyedropper when hovered over.
  • set the thickness of the element used (Line, border, etc.).
Remark: These settings as well as advanced options for the different drawing tools are also available from the image editor pane.

"Display" group

The Display group allows you to set the display options of the elements in the editor.
Display group
The "Zoom" option is used to:
  • increase or reduce the zoom.
    Remark: To change the zoom value, you can also use:
    • Ctrl + mouse wheel.
    • the progress bar in the pane of the image editor.
  • display the image in its original size (100%).
  • adapt the image to the screen.
  • specify a value.
The "Pane" option shows or hides the image editor panel. For more details, see Pane features.
New in version 2024
The "Rulers" option lets you choose whether to display vertical or horizontal rulers.. In these rulers, right-click on a ruler scale to display a Context menu. This menu allows you to:
  • add a marker. This marker can be moved using the mouse, by clicking on the Receiver arrow in the ruler..
  • change the position of the selected marker. Simply indicate the new position.
  • delete the selected marker.
  • delete all markers.
Ribbon: "Other tools" tab
The "Other tools" pane includes different options to edit an image or image layer.
Other tools pane
The options are divided into several groups:
  • Layers: Defines the layers.
  • Rotation and symmetry: Rotates and changes the direction of the image.
  • OCR: Allows you to use OCR on text present in the image.
  • Effects and settings: Used to handle the image content.
  • Transformation: Used to transform the image.

"Layers" group

The "Layers" group allows you to handle the layers.
Layers group
You can:
  • Create a new layer either blank, or from an image.
  • Duplicate an existing layer.
  • Flatten the image layers. These options are also available in the image editor pane. For more details, see Pane features.

"Rotation and symmetry" group

The Rotation and symmetry group allows you to make simple transformations on the image.
Size group
The different options are:
  • Rotation: Rotates the current layer (preset or custom rotation).
    Rotation
  • Symmetry: Defines the symmetry of the current layer (horizontal and/or vertical).
    Symmetry

"OCR" group

The "OCR" option analyzes the text contained in a portion of the image displayed in the image editor.
OCR
To use this option:
  1. Click "OCR".
  2. Drag the cursor over the portion of the image containing the text to be analyzed.
  3. The text is interpreted and copied to the clipboard. A message lets the user know that the text is in the clipboard. It can then be pasted into any application.
OCR languages: By default, OCR supports English, Spanish and French. The language used depends on the parameter passed to Nation.
To add more languages:
  1. If necessary, download the model for the desired language (read the native OCR documentation).
  2. Use OCRLoadLanguage to load the desired language.
  3. Change the language with Nation.

"Effects and settings" group

The Effects and settings group is mainly used to edit the image content.
Effects and Settings group
The available options are:
  • Contrast Lightness: This option opens a window to adjust the contrast and lightness of the image.
    Contrast and lightness
    The contrast is between -100 and +100. The lightness is between -255 and +255. These adjustments appear immediately on the image ("Image preview" option).
  • Transparent color: This option is used to select the color that will become transparent in the image.
    Transparent color
    This adjustment appear immediately on the image ("Image preview" option). The eyedropper selects a color from your image.
  • HSL settings: This option allows you to adjust the Hue, Saturation and Lightness levels of the image.
    HSL settings
    The hue is between -180 and +180. The saturation is between -100 and +100. The lightness is between -255 and +255. These adjustments appear immediately on the image ("Image preview" option).
  • Transform colors: This option replaces one color in the image with another.
    Color transformation
    This adjustment appear immediately on the image ("Image preview" option).
  • Shadow: Applies a shadow effect to the elements of an image. The shadow increases each time you click "Shadow". The light source that generates the shadow comes from the upper-left corner.
  • Halo: Adds a shadow around the image elements (equivalent to a shadow on all sides). The halo thickness can be adjusted.
    Halo
    This adjustment appear immediately on the image ("Image preview" option).
  • Black and white: Converts the color images to black and white (grayscale).

"Transformation" group

The Transformation group has different options to set the image size.
Transformation
The available options are:
  • Icon: This option converts the current image to an icon. The different icon formats available appear on the left of the editor. You can add specific formats ("+" button), remove unnecessary formats and regenerate the icons by changing the size of the source image.
    Icons
  • Multi DPI: Creates a set of images corresponding to the different DPIs. The different DPIs available appear on the left of the editor. You can add specific DPIs ("+" button), remove unnecessary DPIs and regenerate the images by changing the size of the source image. The "Export DPI" option in the "Home" tab of the ribbon generates the corresponding files. The names of these images have the following format:
    omImage@dpi99x.Extension
    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor uses a DPI of 160. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the DPI of 160.
    • "Logo@dpi1_5x.png" for the DPI of 240.
    • "Logo@dpi2x.png" for the DPI of 320.
    • "Logo@dpi3x.png" for the DPI of 480.
    • "Logo@dpi4x.png" for the DPI of 640.
  • Border: This option opens a window to add a border around the image.
    Border settings
    You can:
    • use a preset border: simple Black, round, etc.
    • customize a preset border.
    • use a custom border.
Image editor pane
The pane on the right of the image editor includes different options to:
Image editor pane
  • Preview the image and the selected area.
  • Zoom the image displayed in the editor with a slider.
  • Select the Color used for the various tools (fill, pencil, Line, etc.).. You can also use the eyedropper to select a color.
  • Select the thickness of various tools (Line, pencil, etc.)..
  • Manage and select the layers.

Layer management

Layers are stacked on top of each other. Each layer contains an element of an image. For example, you can use a layer to create a "Promotion" stamp on an image.
The options available for layers are as follows:
  • Make a layer visible or invisible (Visible),
  • Add a new layer (New),
  • Delete the selected layer (Delete),
  • Duplicate the selected layer (Duplicate),
  • Move the selected layer (Move),
  • Flatten the image (Flatten).
Each layer has a context menu with different actions (duplicate, move, etc.).
The "Visible/Invisible programmatically" option allows you to manipulate the layer in the code: You can display the image in an Image control and specify the layer you want to show or hide.
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment

Last update: 02/21/2024

Send a report | Local help