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

Добавление редактора
Если вам нужно добавить редактор для картинки без выделенных объектов:
Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите
в блоке Интерфейс задания на странице проекта).
Включите в HTML-код интерфейса компонент
{{field type="image-annotation"
name="<название выходного поля>"
src=<URL изображения>}}
. Например:{{field type="image-annotation" name="result" src=image}}
СкопированоПолный список параметров см. в таблице.
- Добавьте во входные данные поле для указания ссылки на картинку. Если вы храните картинки на Яндекс Диске, используйте тип строка, а не ссылка.
- В выходные данные добавьте поле
result
с типом json.
В поле result
будет записан объект 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, начало координат находится в левом верхнем углу картинки.
Если у вас есть картинки с выделенными объектами и вы хотите загрузить их в задание:
Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите
в блоке Интерфейс задания на странице проекта).
Включите в HTML-код интерфейса компонент
{{field type="image-annotation"
name="<название выходного поля>"
src=<URL изображения>
annotations=<название входного поля>}}
. Например:{{field type="image-annotation" name="result" src=image annotations=polygon}}
Скопировано- Добавьте во входные данные:
- Поле для указания ссылки на картинку. Если вы храните картинки на Яндекс Диске, используйте тип строка, а не ссылка.
Поле
polygon
с типом json для передачи координат выделенной области.
- В выходные данные тоже добавьте поле
result
с типом json. Поле для записи результатов обязательно для этого компонента. Если исполнитель поменяет выделенную область, туда будут записаны обновленные координаты. Экранируйте JSON c координатами точек и добавьте в TSV-файл с заданиями.
- Параметры
-
Параметр
Описание
Обязательный
Значение по умолчанию
type
Тип поля: image-annotation
— редактор для выделения области на картинке.да
нет
name
Атрибут для поля выходных данных. Содержит имя поля выходных данных.
да
нет
src
URL изображения. Варианты значений:
URL из входных данных задания. Например, из поля с идентификатором
url
:src=image
.Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например:
src="https://mywebsite.ru/img1.png"
.Относительная ссылка. Если вы используете файлы с Яндекс Диска, укажите компонент
proxy
и название поля входных данных. Например, для поля с названиемimage
запишитеsrc=(proxy image)
. Измените тип поля на строку.
да
нет
annotations
Атрибут для поля входных данных. Содержит название поля входных данных. Сюда можно передавать координаты разметки для последующего редактирования. Формат данных — объект JSON.
нет
нет
Параметр
Описание
Обязательный
Значение по умолчанию
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 — переход от выделенной точки к предыдущей.
Расскажите исполнителям о горячих клавишах в инструкции, чтобы ускорить выполнение задания.
Инструменты для выделения
По умолчанию в интерфейс задания будет добавлен один инструмент редактора — многоугольник.
Вы можете изменить набор инструментов:
.image-annotation-editor__shape-rectangle { display: none; }
Скопировано
.image-annotation-editor__shape-polygon { display: none; }
Скопировано
.image-annotation-editor__shape-rectangle { display: none; }
Скопировано
Аннотация
Чтобы использовать аннотации, вставьте в блок JS один из этих примеров:
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; } }); }, onDestroy: function() { // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы } }); function extend(ParentClass, constructorFunction, prototypeHash) { constructorFunction = constructorFunction || function () {}; prototypeHash = prototypeHash || {}; if (ParentClass) { constructorFunction.prototype = Object.create(ParentClass.prototype); } for (var i in prototypeHash) { constructorFunction.prototype[i] = prototypeHash[i]; } return constructorFunction; }
Скопировано
var listOption = [["Животные","Кошка","Собака","Птичка"]]; var listValues = [ ["-","Cat","Dog","Bird"] ]; var bigListValues = []; for(var i=0;i<listValues.length;i++){ for (var j=0;j<listValues[i].length;j++){ if(j != 0){ bigListValues[bigListValues.length] = listValues[i][j]; } } } 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._select = document.createElement('select'); for(var j=0;j<listOption.length;j++){ var listGroup = listOption[j]; var valuesGroup = listValues[j]; var optgroup = document.createElement("optgroup"); optgroup.setAttribute('label', listGroup[0]); for (var i = 1; i < listGroup.length; i++) { var option = document.createElement("option"); if (i == 0) { option.setAttribute('disabled', 'disabled'); } option.value = valuesGroup[i]; option.className = "seletOpt"; var oText = document.createTextNode(listGroup[i]); option.appendChild(oText); optgroup.appendChild(option); } this._select.appendChild(optgroup); } this._select.addEventListener('change', function() { this._shape.annotation = this._select.value; _.each(bigListValues, function(value) { this._polygonEl.classList.remove(value.toLowerCase()); }.bind(this)); this._polygonEl.classList.add(this._select.value.toLowerCase()); }.bind(this)); return this._select; }, onShow: function(shape, el) { console.log("shape: ", shape) console.log("el: ", el) this._shape = shape; this._select.value = shape.annotation; this._polygonEl = el; } }); }, onDestroy: function() { // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы } }); function extend(ParentClass, constructorFunction, prototypeHash) { constructorFunction = constructorFunction || function () {}; prototypeHash = prototypeHash || {}; if (ParentClass) { constructorFunction.prototype = Object.create(ParentClass.prototype); } for (var i in prototypeHash) { constructorFunction.prototype[i] = prototypeHash[i]; } return constructorFunction; }
Скопировано
Получите объект редактора
getEditor()
и интерфейса для аннотацийgetField('result')
в методеonRender()
:var field = this.getField('result'); var editor = field.getEditor();
Скопировано- Установите реализацию интерфейса для аннотаций в методах:
createInterfaceElement()
— вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).onShow(shape, options)
— отображает интерфейс для аннотаций, когда исполнитель наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел исполнитель.
Чтобы исполнитель мог ввести аннотацию к выделенной области или выбрать ее из списка, в задание нужно добавить элемент интерфейса (например, текстовое поле, выпадающий список):
Взаимодействие исполнителя с редактором вызывает следующие события:
shape:start
— начало выделения области.shape:finish
— завершение выделения.shape:cancel
— удаление точки.shape:remove
— удаление выделения.
Подписаться на эти события можно так:
editor.on('shape:start', function() { /* обработка события */ });
Скопировано