Abstract
Abstract
disabledRetrieves the current state of the edit trigger button, indicating if it is enabled or disabled.
Whether the edit trigger button is disabled (true
) or enabled (false
).
imageEditor.disabled;
Sets the state of the edit trigger button, enabling or disabling its functionality.
Whether to disable (true
) or enable (false
) the edit trigger button.
imageEditor.disabled = <true|false>;
Abstract
addAdds 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.Event to be listened to.
Callback function to be executed after the event was fired.
// example to listen to the `close` event
imageEditor.addCroproEventListener("close", () => {
// your logic goes here
console.log("Editor closed!");
});
Abstract
addAdds 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.Event to be listened to.
Callback function to be executed after the event was fired.
// 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();
}
});
Abstract
closeClose Cropro user interface.
Optional
saveChanges: booleanIndicates whether the current editing state should be saved (true
) or if the editor should close without saving changes (false
).
saveChanges = false
// close without saving changes
imageEditor.closeCropro();
// close and save changes
imageEditor.closeCropro(true);
Abstract
closeClose Marker user interface.
Optional
saveChanges: booleanIndicates whether the current editing state should be saved (true
) or if the editor should close without saving changes (false
).
saveChanges = false
// close without saving changes
imageEditor.closeMarker();
// close and save changes
imageEditor.closeMarker(true);
Abstract
createAdds 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.
The foundation marker type for the custom marker.
A unique identifier for the custom marker.
The icon representing the custom marker.
<portal>/external/htmlroot/thirdparty
folder of your Intrexx installation.thirdparty
folder, e.g., "icon54/svg/line/BasicIcons/Rocket.svg
".<portal>/external/htmlroot/thirdparty/icon54/README.md
file or check the online help for more details.<title>
tag, the title will be override the customMarkerName
parameter, so it's recommended to omit the <title>
tag.Customized settings for the custom marker.
This functionality is exclusive to the Marker editor, specifically designed for drawing, labeling, and annotating images.
// 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" }
);
Abstract
openAbstract
open
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.
Marker
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:
The UpFileEditControl provides two methods for this:
Further information can be found in the examples and methods below.
Element
ix-image-editor
Example
Getting the image editor instance