Image Editor component.

This component provides two editors for image editing that can be used within the UpFileEditControl.
The editors are available for image files that have already been uploaded and for which at least one editor is activated in the options of the file upload control.

  • The editor for drawing, labeling and annotating is called Marker
  • The editor for cropping, rotating and scaling is called Cropro

Both editors can be used independently from each other.


To use the editor API, you must first obtain the instance of an editor by following the steps below:

  1. Retrieve the instance of UpFileEditControl in which the image file to be edited is located
  2. Determine the ID of the file for which you want to call up the image editor:
  3. Get the editor instance of the file you want to edit.
    The UpFileEditControl provides two methods for this:
  4. Use the editor's API to customize the editor to your needs.
    Further information can be found in the examples and methods below.

Element

ix-image-editor

Example

Getting the image editor instance

// get the file upload control
var fileUpload = ix.util.getUp("<FILEUPLOAD-GUID>");

// determine the file ID you want to get the image editor for
// you can use the `fileUpload.getValue(true)` or `fileUpload.getFilesInfo()` method to get the ID of an file
// in this example we use the first file (assuming it is an image)
var fileId = fileUpload.getFilesInfo()[0].id;

// get the image editor with the given file id
var imageEditor = fileUpload.getImageEditor(fileId);

Hierarchy

  • UpImageEditor

Accessors

  • get disabled(): boolean
  • Retrieves the current state of the edit trigger button, indicating if it is enabled or disabled.

    Returns boolean

    Whether the edit trigger button is disabled (true) or enabled (false).

    Example

    imageEditor.disabled;
    
  • set disabled(disabled): void
  • Sets the state of the edit trigger button, enabling or disabling its functionality.

    Parameters

    • disabled: boolean

      Whether to disable (true) or enable (false) the edit trigger button.

    Returns void

    Example

    imageEditor.disabled = <true|false>;
    

Methods

  • Adds an eventlistener to Cropro to listen to the following events:

    • render: Is triggered when rendering (saving changes) is completed after the user has pressed the OK button.
    • close: Is triggered after the user interface has been closed.

    Parameters

    • event: "render" | "close"

      Event to be listened to.

    • callbackFn: Function

      Callback function to be executed after the event was fired.

    Returns void

    Example

    // example to listen to the `close` event
    imageEditor.addCroproEventListener("close", () => {
    // your logic goes here
    console.log("Editor closed!");
    });
  • Adds an eventlistener to Marker to listen to the following events:

    • show: Is triggered after the user interface has been opened.
    • render: Is triggered when rendering (saving changes) is completed after the user has pressed the OK button.
    • beforeclose: Is triggered before the user interface closes.
    • close: Is triggered after the user interface has been closed.

    Parameters

    • eventName: "render" | "close" | "show" | "beforeclose"

      Event to be listened to.

    • callbackFn: Function

      Callback function to be executed after the event was fired.

    Returns void

    Example

    // example to listen to the `beforeclose` event
    imageEditor.addMarkerEventListener("beforeclose", (event) => {
    // display a confirmation dialog to prevent accidental closing of the editor without saving
    if (!confirm("Do you want to discard changes?")) {
    event.preventDefault();
    }
    });
  • Close Cropro user interface.

    Parameters

    • Optional saveChanges: boolean

      Indicates whether the current editing state should be saved (true) or if the editor should close without saving changes (false).

    Returns void

    Default

    saveChanges = false

    Example

    // close without saving changes
    imageEditor.closeCropro();

    // close and save changes
    imageEditor.closeCropro(true);
  • Close Marker user interface.

    Parameters

    • Optional saveChanges: boolean

      Indicates whether the current editing state should be saved (true) or if the editor should close without saving changes (false).

    Returns void

    Default

    saveChanges = false

    Example

    // close without saving changes
    imageEditor.closeMarker();

    // close and save changes
    imageEditor.closeMarker(true);
  • Adds a new custom marker to the Marker editor with user-defined settings.

    This method seamlessly integrates a personalized marker into the image editor, allowing users to specify the marker type, assign a unique name, choose an icon and configure custom default settings. The custom marker is then conveniently added to the Marker Editor's toolbar.

    Parameters

    • baseMarkerType: string

      The foundation marker type for the custom marker.

      • Refer to the Marker Reference for a comprehensive list of available marker types.
    • customMarkerName: string

      A unique identifier for the custom marker.

    • customMarkerIcon: string

      The icon representing the custom marker.

      • The icon must be a valid SVG file.
      • Supported icons are part of Intrexx's icon54 set
        • Icons can be found in the <portal>/external/htmlroot/thirdparty folder of your Intrexx installation.
        • The icon path must be relative to the thirdparty folder, e.g., "icon54/svg/line/BasicIcons/Rocket.svg".
        • Refer to the <portal>/external/htmlroot/thirdparty/icon54/README.md file or check the online help for more details.
      • Also supported are any other SVG icon, which can be used by providing the SVG code as a string.
        • The default icons of the editor are from Material UI
        • It's possible to copy the SVG code there.
        • Note: When using a SVG string with a <title> tag, the title will be override the customMarkerName parameter, so it's recommended to omit the <title> tag.
    • customMarkerSettings: Settings

      Customized settings for the custom marker.

      • See the Settings Reference for comprehensive information on available settings.
      • Settings not overridden by the user will be inherited from the base marker type.
      • Not all settings are universally applicable to every marker type; users are encouraged to refer to the respective documentation for compatibility details.

    Returns void

    Note

    This functionality is exclusive to the Marker editor, specifically designed for drawing, labeling, and annotating images.

    Example

    // EXAMPLE 1
    // Adding a custom "Rejected Marker" based on the "CaptionFrameMarker" with a `defaultColor` of red and a `defaultCaptionText` of "rejected"
    imageEditor.createCustomMarker(
    "CaptionFrameMarker",
    "Rejected Marker",
    "icon54/svg/line/BasicIcons/ThumbsDown.svg",
    { defaultCaptionText: "Rejected!", defaultColor: "red" }
    );

    // EXAMPLE 2
    // Adding a custom "Approved Marker" based on the "TextMarker" with a `defaultText` of "Approved" and a `defaultColor` of "green"
    // Using an SVG string of any source instead of an icon from the icon54 set
    imageEditor.createCustomMarker(
    "TextMarker",
    "Approved Marker",
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" />
    </svg>`,
    { defaultText: "Approved!", defaultColor: "green" }
    );
  • Opens the Cropro user interface.

    Returns void

    Example

    imageEditor.openCropro();
    
  • Opens the Marker user interface.

    Returns void

    Example

    imageEditor.openMarker();