ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Image editor
  • Overview
  • Features in the "Selection" group
  • Features in the "General" group
  • Features in the "Zoom" group
  • Features in the "Tools" group
  • Features in the "Transformation" group
  • Features in the "Miscellaneous" group
  • Effects and settings
  • 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
Overview
The image editor includes several features. These features can be accessed via the specific editor ribbon ("Image" pane).
Ribbon of the image editor
This page presents the available features.
Remarks:
  • General operations: opening, saving, ...: The image editor also includes all standard features:
    • via the quick access buttons (open, save, etc.).
    • via the "Home" pane of the ribbon (open, save, save as, close, etc.).
  • To print the image displayed in the editor:
    1. Use:
      • the Print button in the "Home" pane.
      • the Ctrl P shortcut.
    2. Specify the print characteristics in the window that is displayed and validate.
Features in the "Selection" group
The image editor includes several selection tools:
Selection options
  • Rectangle: Used to select a rectangular area in the current layer with the mouse. The area is defined by keeping the left button down. Releasing the left mouse button ends the selection area. The area is represented by a rectangle in dotted line.
  • Lasso: Used to select any area in the current layer with the mouse. The start point is defined by the left mouse button. The area is defined by keeping the left button down. Releasing the left mouse button ends the selection area. The area is represented by a colored outline. Then, this area can be moved with the move tool.
  • Wand: Used to select a colored area without having to draw its outline. All you have to do is specify the tolerance for the selections performed with this tool.
    Configuring the tolerance
    A low tolerance means that the wand will select less colors while a high tolerance means that the wand will cover a wide range of colors.
  • Move and resize (Ctrl T): Allows you to:
    • move the content of the layer or selected area with the mouse. The move is performed by keeping the left mouse button down. Releasing the left mouse button validates the move.
    • resize the content of the layer or selected area with the mouse. The resizing is performed with the mouse, by using the area handles. If the Shift key is held down while resizing, the proportions are retained.
    • rotate the layer or selected area with the mouse. Simply move the mouse away from the area handles to display a rotation cursor (double curved arrow). Then, keep the left mouse button down when rotating the object in the desired direction. Releasing the left mouse button validates the rotation.
Features in the "General" group
The options in the "General" group allow you to handle the image displayed in the editor:
General group
You can:
  • Crop the image: This option changes the mouse cursor into a specific tool that selects the area to be kept. The image is automatically cropped.
  • Resize the image: In the window that is displayed, specify the new size or the percentage of enlargement/reduction.
    Resizing

    Remarks:
    • The resizing is performed for the current layer. If you select the "Entire image" layer, the resizing will be performed for all layers.
    • Click the chain icon to perform a non-proportional resizing.
  • Modify the work area: In the window that appears, specify:
    Enlargement
    • New work area size (absolute or percentage).
    • The image enlargement mode.
  • 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
Features in the "Zoom" group
You have the ability to perform a zoom on the image via the zoom options:
  1. On the "Image" tab, in the "Zoom" group, click "Zoom".
  2. Select the desired option:
    Zoom options
It is also possible to press Ctrl++ to zoom in and Ctrl-- to zoom out.
The "Images" pane can also be used to perform a zoom via the setting slider.
Images pane
Features in the "Tools" group
The image editor proposes several tools for handling the image.
Tools
  • Pencil: Used to draw a continuous curve on the current layer. The drawing starts as soon as the left mouse button is pressed then it follows the mouse movement. The thickness and the color can be defined in the settings of "Images" pane, "Colors" section.
  • Eraser: Used to erase an image section on the current layer. The eraser thickness is defined in the settings of the "Images" pane, "Colors" section.
  • Fill: Fills an area of the current layer. This area can be the entire layer, an area defined by a selection, ... The fill color can be defined in the settings of the "Images" pane, "Colors" section.
  • Ellipse: Used to draw an ellipse on the current layer. With a click, you can define the starting point of the area in which the ellipse will be drawn. The ellipse will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Remark: to obtain a perfect circle, press Shift while drawing an ellipse.
  • Rectangle: Used to draw a rectangle on the current layer. With a click, you can define the starting point of the rectangle. The rectangle will be drawn as you move the mouse. The end point is defined by releasing the left mouse button. The line thickness and color, as well as the background color can be defined in the "Images" pane, "Color and line" section.
    Remark: to obtain a perfect square, press Shift while drawing a rectangle.
  • Arrow: Used to draw an arrow with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point (arrowhead) is defined by releasing the mouse button. The line thickness and color and the characteristics of the arrow can be defined in the "Images" pane, "Colors" section.
    Remark: to get a perfectly horizontal or vertical arrow, press Shift while drawing the arrow.
  • Text: Used to define a text area on the image. The text area is defined by the left mouse click. The text font, size, alignment, color and attributes can be defined in the menu bar found above the text area.
    Text attributes
  • Watermark: Allows you to add a watermark to the image. The watermark area is defined with the left mouse button. A window appears, allowing you to define the different watermark settings: font, color, alignment, angle, text, ...
    Entering the watermark
    The "Preview on image" option allows you to view the watermark on the current image, without closing the watermark settings window.
  • Line: Used to draw a line with the mouse on the current layer. The start point is defined by the left click. The line follows the mouse movement. The end point is defined by releasing the left mouse button. The line thickness and color can be defined in the settings of the "Images" pane, "Colors" section.
    Remark: to get a perfectly horizontal or vertical line, press Shift while drawing the line.
  • Blur: Performs a Gaussian blur on the selection. The window that appears allows you to specify the radius. You can also preview the image before applying the Gaussian blur.
  • Capture: Allows you to capture an area of the screen with a lasso. The screen capture is added to the current image in a new layer.
Features in the "Transformation" group
The image editor allows you to perform several transformations on the current image:
Transformation
  • Icon: 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.
  • 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" present in the ribbon allows 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: Used to add a border around the image. You can:
    • use a preset border: simple black, round (Android), etc.
    • customize a preset border.
    • use a custom border.
  • 5 states: Used to automatically generate (or regenerate) a 5-state image from a simple image. The image size is multiplied by 5 in width. The 5 states correspond to: Normal, Pressed, Grayed, Selected and Hover.
Features in the "Miscellaneous" group
The image editor includes advanced features:
  • OCR: Optical Character Recognition (OCR) on the image displayed in the image editor. Simply click and drag over the area to be analyzed. The text is automatically copied to the clipboard.
  • Scan: Digitizes an image using a scanner. The window that appears allows you to select:
    • the desired scanner.
    • the source (flatbed, 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
Effects and settings
The image editor allows you to define several settings on the current image via the options in the "Effects and settings" group:
Effects and settings
  • Contrast Lightness: Allows you to define the contrast and lightness of the image. 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 ("Preview on image" option).
  • Transparent color: Used to select the color that will become transparent in the image. This setting can be viewed in real time on the image ("Preview on image" option). The pipette is used to directly select a color in your image.
  • HSL settings: Used to modify the Hue, Saturation and Lightness of the image. 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 ("Preview on image" option).
  • Transforming colors: Used to replace a color by another one in the image. This setting can be viewed in real time on the image ("Preview on image" 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. This setting can be viewed in real time on the image ("Preview on image" option).
  • Black and white: Used to convert the image in color into black and white (grayscale).
Layers
The image editor allows you to manage layers, which means different levels on the image.
These layers can be managed:
  • via the ribbon.
  • via the "Images" pane.
In the ribbon, the options are as follows:
Layers
  • New layer: Used to create a layer on the image. This layer can be created:
    • blank,
    • from an image loaded from a directory,
    • from an image loaded from an image catalog.
    The created layer can be handled in the "Images" pane, "Layers" section.
  • Duplicate: Duplicates the layers selected in the "Images" pane, "Layers" section.
  • Flatten: Merges all the selected layers. It is possible to select a list of layers to merge by using the multi-selection in the list of layers. If one of the selected layers is not visible (grayed eye symbol), an error message is displayed, indicating that the non-visible layers cannot be merged.
The following operations can be performed in the "Layers" section of the "Images" pane:
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, etc.).
Remark: Ctrl + click allows you to select the most appropriate layer, i.e. the layer that has image content under the mouse cursor.
The "Visible/Invisible through programming" option allows you to manipulate the layer in the code: This allows you to display the image in an Image control while specifying the layer to be made visible or invisible (ImageLayerVisible).
Caution: As soon as the option "Visible/Invisible through programming" is enabled for the layers, the ".wdpic" file must be handled via an WDPic variable.
Minimum version required
  • Version 23
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/08/2023

Send a report | Local help