Редактор для выделения области на картинке

Редактор дает возможность выделить область на картинке либо прямоугольником, либо произвольным многоугольником:

Примечание. Не добавляйте обучающие и контрольные задания в проект с редактором для выделения области на картинке.

Добавление редактора

Если вам нужно добавить редактор для картинки без выделенных объектов:

  1. Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).

  2. Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<название выходного поля>" src=<URL изображения>}}. Например:

    {{field type="image-annotation" name="result" src=image}}

    Полный список параметров см. в таблице.

  3. Добавьте поля:

В выходные данные записывается объект JSON c координатами точек. Например:

[{"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"}]	

Значения x и y — числа от 0 до 1. Длина и ширина изображения принимаются за 1, начало координат находится в левом нижнем углу картинки.

Параметры

Параметр

Описание

Обязательный

Значение по умолчанию

type
Тип поля: image-annotation — редактор для выделения области на картинке.

да

нет

name

Атрибут для поля выходных данных. Содержит имя поля выходных данных.

да

нет

src

URL изображения. Варианты значений:

  • URL из входных данных задания. Например, из поля с идентификатором url: src=image.

  • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src="https://mywebsite.ru/img1.png".

  • Относительная ссылка. Если вы используйте файлы на Яндекс.Диске, укажите компонент proxy и название поля входных данных. Например, для поля с названием image запишите src=(proxy image). Измените тип поля на строку.

да

нет

annotations

Атрибут для поля входных данных. Содержит название поля входных данных. Сюда можно передавать координаты разметки для последующего редактирования. Формат данных — объект JSON.

нет

нет

Горячие клавиши

По умолчанию в задании будут работать горячие клавиши:
  • С закрывает многоугольник — соединяет линией первую и последнюю точки.
  • D удаляет выделенную точку, выделенный объект или последнюю точку при создании многоугольника.
  • Стрелки перемещают выделенную точку. При нажатой клавише Alt — медленнее. При нажатых клавишах Alt+Shift — быстрее.
  • Tab — переход от выделенной точки к следующей.
  • Shift+Tab — переход от выделенной точки к предыдущей.

Расскажите исполнителям о горячих клавишах в инструкции, чтобы ускорить выполнение задания.

Инструменты для выделения

По умолчанию в интерфейс задания будет добавлен один инструмент редактора — многоугольник.

Вы можете изменить набор инструментов:

Чтобы добавить прямоугольник, удалите CSS-селектор:
.image-annotation-editor__shape-rectangle {
  display: none;
}

Аннотация

Чтобы исполнитель мог ввести аннотацию к выделенной области или выбрать ее из списка, в задание нужно добавить элемент интерфейса (например, текстовое поле, выпадающий список):

  1. Получите объект редактора getEditor() и интерфейса для аннотаций getField('result') в методе onRender():

    var field = this.getField('result');     
    var editor = field.getEditor();
  2. Установите реализацию интерфейса для аннотаций в методах:
    • createInterfaceElement() — вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).

    • onShow(shape, options) — отображает интерфейс для аннотаций, когда исполнитель наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел исполнитель.

    Пример кода редактора с аннотацией:
    exports.Task = extend(TolokaHandlebarsTask, function (options) {
        TolokaHandlebarsTask.call(this, options);
    }, {
        onRender: function() {
            var field = this.getField('result');     
            var editor = field.getEditor();
            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;
                }
            });
       }

Взаимодействие исполнителя с редактором вызывает следующие события:

  • shape:start — начало выделения области.

  • shape:finish — завершение выделения.

  • shape:cancel — удаление точки.

  • shape:remove — удаление выделения.

Подписаться на эти события можно так:

editor.on('shape:start', function() { 
    /* обработка события */ 
});