Отрисовка результатов детекции на Canvas

Canvas является ключевым элементом для визуализации данных, получаемых при детекции объектов с помощью ml5.js. Основная цель — отображение обнаруженных объектов, их рамок, меток и вероятностей в реальном времени.

Для начала необходимо создать элемент в HTML и получить его контекст в Jav * aScript:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;

Важно: размеры canvas должны соответствовать размеру видео или изображения, которое анализируется, чтобы результаты детекции не искажались.

Рисование прямоугольников вокруг объектов

После получения результатов детекции, каждый объект содержит координаты и размеры рамки (x, y, width, height). Для отображения рамки используется метод strokeRect:

ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.strokeRect(object.x, object.y, object.width, object.height);

Ключевые моменты:

  • strokeStyle задаёт цвет рамки.
  • lineWidth определяет толщину линии.
  • Координаты x и y соответствуют верхнему левому углу объекта на изображении.

Отображение меток и вероятностей

Для информативной визуализации рекомендуется выводить название класса объекта и вероятность детекции. Для этого используется метод fillText:

ctx.font = '16px Arial';
ctx.fillStyle = 'white';
ctx.fillText(`${object.label} (${(object.confidence * 100).toFixed(1)}%)`, object.x + 5, object.y - 5);

Особенности:

  • object.label — название класса (например, “person”, “cat”).
  • object.confidence — вероятность детекции в диапазоне 0–1.
  • Смещение координат текста (+5, -5) предотвращает наложение текста на рамку.

Очистка Canvas перед каждой отрисовкой

Чтобы избежать наложения старых и новых результатов, canvas очищается перед рисованием:

ctx.clearRect(0, 0, canvas.width, canvas.height);

Примечание: этот метод удаляет все предыдущие элементы на canvas, поэтому отрисовка видео и объектов должна выполняться после очистки.

Синхронизация с видео

При работе с видео детекция объектов обычно выполняется в цикле requestAnimationFrame, что обеспечивает плавную визуализацию:

function drawFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    detections.forEach(object => {
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.strokeRect(object.x, object.y, object.width, object.height);

        ctx.font = '16px Arial';
        ctx.fillStyle = 'white';
        ctx.fillText(`${object.label} (${(object.confidence * 100).toFixed(1)}%)`, object.x + 5, object.y - 5);
    });

    requestAnimationFrame(drawFrame);
}

drawFrame();

Ключевые моменты:

  • ctx.drawImage отображает текущий кадр видео на canvas.
  • Массив detections обновляется после каждого вызова модели детекции ml5.js.

Настройка стиля визуализации

Для улучшения читаемости можно использовать разные цвета рамок для различных классов:

const colors = {
    person: 'blue',
    cat: 'green',
    dog: 'orange'
};

ctx.strokeStyle = colors[object.label] || 'red';

Дополнительно можно добавлять прозрачные заливки внутри рамок:

ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
ctx.fillRect(object.x, object.y, object.width, object.height);

Эффект: прозрачная заливка помогает визуально отделять объекты, не закрывая фон.

Оптимизация производительности

При работе с видео высокой частоты кадров важно:

  1. Использовать requestAnimationFrame вместо setInterval.
  2. Ограничивать частоту вызова модели детекции (например, каждые 200–300 мс).
  3. Минимизировать сложные операции на canvas (например, сложные градиенты или фильтры).

Эти меры обеспечивают плавную анимацию и своевременное обновление результатов.

Оглавление