Как распечатать сообщение в браузере с помощью javascript и HTML

В настоящее время я работаю над распознаванием лиц в браузере. Ниже приведен фрагмент кода моего java-скрипта. он обнаруживает ограничивающие рамки, когда лицо видно на экране. Я хочу напечатать сообщение на холсте, когда моя модель не распознает лицо. В этом случае прогнозы.длина будет равна 0 вот мой код, как мне изменить его для моей функциональности

async function draw(video,context, width, height)
{
    context.drawImage(video,0,0,width,height);
    const model = await blazeface.load();
    const returnTensors = false;
    const predictions = await model.estimateFaces(video, returnTensors);
    
    console.info(predictions);
    for (let i = 0; i < predictions.length; i++) {

    const start = predictions[i].topLeft;
    const end = predictions[i].bottomRight;
    var probability = predictions[i].probability;
    const size = [end[0] - start[0], end[1] - start[1]];
    // Render a rectangle over each detected face.
    context.beginPath();
    context.strokeStyle = "green";
    context.lineWidth = "4";
    context.rect(start[0], start[1],size[0], size[1]);
    context.stroke();
    var prob = (probability[0]*100).toPrecision(5).toString();
    var text = prob+"%";
    context.fillStyle = "red";
    context.font = "13pt sans-serif";
    context.fillText(text,start[0]+5,start[1]+20);
    
    
    }
    setTimeout(draw,250,video,context,width,height);
}

вот репозиторий Git, который я реализую https://github.com/adarsh1021/facedetection Не судите строго, я впервые использую JS.

Просто создайте div или h1 сообщение, которое хотите отобразить, и добавьте к нему style = "display:none". Если вы хотите отобразить сообщение, установите для свойства display значение block следующим образом: document.getElementById("myDIV").style.display = "block";

sagar1025 15.12.2020 03:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
257
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Проверьте длину прогнозов
  2. Если нет прогнозов, отобразите сообщение об ошибке на холсте.
...
const predictions = await model.estimateFaces(video, returnTensors);

if (predictions.length < 1) {
  context.fillText('No face detected.', 150, 20);
  context.textAlign = "center"; 
}

console.info(predictions);
for (let i = 0; i < predictions.length; i++) {
...

Я добавил //1 в html-файл, я добавил if-else только в начале моего цикла for чуть выше const start.. однако это текстовое поле не отображается в пользовательском интерфейсе, что я делаю неправильно?

Aayush Gupta 15.12.2020 04:10

Вы хотите добавить его перед циклом for, а не внутри него. Цикл вообще не запустится, если нет никаких прогнозов. Я обновлю свой ответ, чтобы сделать его более понятным.

cam 15.12.2020 04:15

Большое спасибо, это работает. однако, еще одна помощь. Могу ли я изменить местоположение этого сообщения, в настоящее время оно появляется в левом верхнем углу (я указал его как h1). Я бы хотел, чтобы он появился в кадре видео, например, если есть лицо, покажите ограничивающую рамку с вероятностью, если нет лица, то сообщение «Лицо не обнаружено»

Aayush Gupta 15.12.2020 04:21

Хорошо, мы можем добиться этого, написав сообщение на холсте вместо элемента html. Я обновлю свой ответ.

cam 15.12.2020 04:27

Большое спасибо, человек, это работает, и код был прост для понимания :)

Aayush Gupta 15.12.2020 04:41

Другие вопросы по теме