Editor for image area selection
The editor lets you select an area of the image using either a rectangle or an arbitrary polygon:

Adding the editor
-
Connect the $TOLOKA_ASSETS/js/image-annotation.js library (click
in the Task interface section on the project page).
-
Include the
{{field type="image-annotation" name="<field ID>" src=<image URL>}}
component in the HTML code of the interface. Field ID must match the field name in the output data description. For example:{{field type="image-annotation" name="result" src=url}}
-
URL from the input data of the task. For example, from the field with
url
ID:src=url
. -
Direct link. It is recommended to use HTTPS protocol. For example,
src="https://mywebsite.ru/img1.png"
. -
Relative link. Specify the
proxy
Handlebars component and the input data field ID. For example:src=(proxy image)
. To add an image in the area selection editor, change the input data field type to string. -
URL from the input data of the task. For example, from the field with
url
ID:src=url
. -
Direct link. It is recommended to use HTTPS protocol. For example,
src="https://mywebsite.ru/img1.png"
. -
Relative link. Specify the
proxy
Handlebars component and the input data field ID. For example:src=(proxy image)
. To add an image in the area selection editor, change the input data field type to string.
Full list of parametersParameter
Description
Required
Default value
type
Field type: image-annotation
, the image area selection editor.yes
no
name
Field ID. Must match the field name in the output data description.
yes
no
src
Image URL. Supported values:
yes
no
Parameter
Description
Required
Default value
type
Field type: image-annotation
, the image area selection editor.yes
no
name
Field ID. Must match the field name in the output data description.
yes
no
src
Image URL. Supported values:
yes
no
-
-
Add a field of
JSON
type into the output data description. For example:{ "result": { "type": "json", "required": true } }
The output data contains a JSON object with point coordinates. For example:
{"data":{"p1":{"x":0.472,"y":0.413},"p2":{"x":0.932,"y":0.877}},"type":"rectangle"}, {"data":[{"x":0.143,"y":0.807},{"x":0.317,"y":0.87},{"x":0.511,"y":0.145},{"x":0.328,"y":0.096},{"x":0.096,"y":0.554}],"type":"polygon"}]"
The x and y values are numbers from 0 to 1. Length and width of the image are taken as 1, with the center of coordinates in the lower-left corner of the image.
Keyboard shortcuts
- C closes a polygon connecting the first and last points with a line.
- D deletes the selected point, selected object or last point when creating the polygon.
- Arrows move the selected point. With Alt pressed, they move it slower. With Alt+Shift pressed, they move it faster.
- Tab moves from the selected point to the next one.
- Shift+Tab moves from the selected point to the previous one.
Tell performers about keyboard shortcuts in the instructions to speed up the task completion.
Selection tools
By default, rectangle tool is added to the task interface.
You can change the tools set:
.image-annotation-editor__shape-rectangle {
display: none;
}
.image-annotation-editor__shape-polygon {
display: none;
}
.image-annotation-editor__shape-rectangle {
display: none;
}
Annotation
To let the performer enter annotation for the selected area, add an interface element to the task (for example, radio buttons, checkboxes or an input field):
-
Get the editor object
getEditor()
and annotation interfacegetField('result')
in theonRender()
method:var field = this.getField('result'); var editor = field.getEditor();
- Implement the annotation interface in these methods:
-
createInterfaceElement()
— Calls the interface DOM element (the method is called once during the initialization of the object). -
onShow(shape, options)
— Displays the annotation interface element when the performer points the mouse at the selected area. Accepts JSON with polygon point coordinates. This JSON can be also used to save annotation entered by the performer.
Code example for an editor with a text input field:
editor.annotationInterface = field.createAnnotationInterface({ createInterfaceElement: function() { this._input = document.createElement('input'); this._input.addEventListener('input', function() { this._shape.annotation = this._input.value; }.bind(this)); return this._input; }, onShow: function(shape) { this._shape = shape; this._input.value = shape.annotation; } });
-
The following events occur when the performer interacts with the editor:
-
shape:start
— Start of the area selection. -
shape:finish
— End of the area selection. -
shape:cancel
— Removal of a polygon point. -
shape:remove
— Removal of area selection.
To subscribe to these events:
editor.on('shape:start', function() { /* event handling */ });