ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Editors / Image editor
  • Overview
  • Features in the "Selection" group
  • Features in the "General" group
  • Functions of the "Display" 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, Record, etc.:
    The image editor also includes all standard features:
    • or via quick-access buttons (open, save, etc.).
    • via the ribbon's "Home" pane (open, save, save as, close, etc.).
  • To print the image displayed in the editor:
    1. Use:
      • the Impression 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.
    Tolerance settings
    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 to:
    • display handles around the selected area.
    • 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.
      You can also use the keys on the keyboard.
    • 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, hold 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 appears, specify the new size or the percentage to enlarge or reduce the image.
    Resize

    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.
  • Modify the work area: When this option is selected, two actions are possible:
    • Resize with mouse (option by Default): handles appear around the Image to resize it.
    • Resizing window: In the window that appears, specify:
      growth
      • New work area size (absolute or percentage).
      • The image enlargement mode.
  • Rotation: Rotates the current layer (preset or custom rotation).
    Rotation
  • Symmetry: Defines the symmetry of the current layer (horizontal and/or vertical).
    Symmetry
Functions of the "Display" group
The "Display" group options allow you to manage the Image display in the editor..
You can:
  • zoom in on Image: pull down the "Zoom" option and select the desired option:
    Zoom options
    You can also use the shortcut 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
  • whether or not to display vertical or horizontal rulers under the editor. In these rules:
    • click on the ruler to create a marker.
    • right-click on the ruler to display a Context menu. This menu is used to:
      • add marker. This marker can be moved with 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.
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, etc.. 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.
    Font, size, Alignment, Color, text attributes can be defined in the "Text" pane of the editor ribbon.
    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, ...
    Enter Watermark
    The "Image preview" 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), remove unnecessary formats and regenerate the icons by changing the size of the source image.
  • 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 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: 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 between -255 and +255. These adjustments appear immediately on the image ("Image preview" option).
  • Transparent color: Used to select the color that will become transparent in the image. These settings can be viewed in real time on the image ("Image preview" option). The eyedropper selects a color from 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 between -100 and +100. The lightness is between -255 and +255. These adjustments appear immediately on the image ("Image preview" 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: 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. This setting can be viewed in real time on the image ("Preview on image" option).
  • Black and white: Converts the color images to 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 also has an handle context menu (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: 05/24/2024

Send a report | Local help