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

To add the editor to the task:
  1. Connect the $TOLOKA_ASSETS/js/image-annotation.js library (click in the Task interface section on the project page).

  2. 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}}
    Full list of parameters

    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:

    • 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".

    yes

    no

  3. 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

By default, you can use the following keyboard shortcuts in the task:
  • 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.

Buttons

By default, both rectangle and polygon elements are added to the task interface. To hide rectangles, add the following selector to the CSS field:
.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):

  1. Get the editor object getEditor() and annotation interface getField('result') in the onRender() method:

    var field = this.getField('result');     
    var editor = field.getEditor();
  2. 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 */ 
});