ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or site / 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" pane
  • "Layers" group
  • "Rotation and symmetry" group
  • "OCR" group
  • "Effects and settings" group
  • "Transformation" group
  • Pane of image editor
  • Layers
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 the image, and show or hide the pane.

"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.
  • New in version 28
    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.
  • Enlarge the work area: In the window that appears, specify:
    Enlargement
    • 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.
    New in version 28
    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,
      • Text formatting options: bold, italic, underline, etc.
      • Background color, text color,
      • Alignment (center, align right, 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.
      Watermark settings
      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. Validate. 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 selected area can be 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 selected area can be 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 selected area can be 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 it: 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 is displayed 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 area 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 in full size (100%).
  • adapt to screen.
  • specify a value.
The "Pane" option is used to manage the display of pane of image editor. For more details, see Pane features.
Ribbon: "Other tools" pane
The "Other tools" pane is used to perform various operations on an image or image layer.
Other Tools pane
The options are grouped into several groups:
  • Layers: Used to manage the layers.
  • Rotation and symmetry: Used to manage simple transformations on 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 is used to manage 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 operations can also be performed via the pane of image editor. For more details, see Pane features.

"Rotation and symmetry" group

The Rotation and symmetry group allows you to manage simple transformations on the image.
Size group
The different options are:
  • Rotation: Used to rotate the current layer (preset or custom rotation).
    Rotation
  • Symmetry: Used to perform a 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.
Manage 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 manage the image content.
Effects and Settings group
The available options are:
  • Contrast Lightness: This option is used to define the contrast and lightness of image via a specific window.
    Contrast and lightness
    The contrast is included between -100 and +100. The lightness is included between -255 and +255. These settings can be viewed in real time 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
    These settings can be viewed in real time on the image ("Image preview" option). The pipette is used to directly select a color in your image.
  • HSL settings: This option is used to modify the Hue, Saturation and Lightness options of image.
    HSL settings
    The hue is included between -180 and +180. The saturation is included between -100 and +100. The lightness is included between -255 and +255. These settings can be viewed in real time on the image ("Image preview" option).
  • Transfo colors: This option is used to replace a color by another one in the image.
    Transforming colors
    These settings can be viewed in real time on the image ("Image preview" option).
  • Shadow: Used to apply a shadow effect on the image elements in relation to the image background. The shadow effects are increased whenever a click is performed on the "Shadow" option. The source of light used to generate the shadow comes from the upper-left corner.
  • Halo: Used to define a shadow around the image elements (equivalent to a shadow on all sides). You can define the thickness of the halo.
    Halo
    These settings can be viewed in real time on the image ("Image preview" option).
  • Black and white: Used to convert the image in color into black and white (grayscale).

"Transformation" group

The Transformation group is mainly used to manage the image size.
Transformation
The available options are:
  • Icon: This option is used to change the current image into icon. The different icon formats available appear on the left of the editor. You can add specific formats ("+" button), to delete useless formats, to regenerate the icons by resizing the source image.
    Icons
  • Multi DPI: Used to create 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), to delete useless DPIs, to regenerate the images by resizing the source image. The option "Export DPI" found in the "Home" pane of ribbon is used to generate the corresponding files. The name of these images is formatted as follows:
    omImage@dpi99x.Extension
    Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
    The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
    • "Logo@dpi1x.png" for the 160 DPI.
    • "Logo@dpi1_5x.png" for the 240 DPI.
    • "Logo@dpi2x.png" for the 320 DPI.
    • "Logo@dpi3x.png" for the 480 DPI.
    • "Logo@dpi4x.png" for the 640 DPI.
  • Border: This option is used to add a border around the image via a specific window.
    Configuring borders
    You can:
    • use a preset border: simple black, round, ...
    • customize a preset border.
    • use a custom border.
Pane of image editor
The pane found on the right of image editor is used to:
Pane of image editor
  • Preview the image and the selection performed in the image.
  • Zoom the image displayed in the editor via the size cursor.
  • Select the color used for the different tools (fill, pen, line, ...). The color can also be selected via the pipette.
  • Select the thickness of different tools (line, pen, ...).
  • Manage and select the layers.

Layers

The layers are stacked one above another, each one containing some image elements. You can for example create a layer to display a "Promotion" stamp on an image.
The following options are available for the layers:
  • 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 includes a context menu allowing you to handle it (duplicate, merge, move, ...).
The option "Visible/Invisible through programming" allows you to make the layer usable through programming: This allows you to display the image in an Image control while specifying the layer to be made visible or invisible.
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment

Last update: 07/01/2023

Send a report | Local help