Распознавание цветов в браузере с tracking.js за 5 шагов
Использование технологии компьютерного зрения для распознавания цветов на изображениях и в видео с помощью библиотеки tracking.js Обсудить Решение множества задач машинного зрения (сегментация изображений, выделение объектов и лиц) основано на распознавании цвета. Благодаря JavaScript-библиотеке Tracking.js это можно делать прямо в браузере! Чтобы разобраться, как работает этот плагин, мы создадим демо-приложение, в которое можно загрузить нужное изображение и выбрать цвет для распознавания. В нем будет загрузчик файлов, превью картинки и колорпикер для указания искомого цвета. Также добавим настройку допустимого отклонения ( Нажатие на кнопку Поиграть с приложением вы можете по ссылке. Полный код со всеми ресурсами доступен на GitHub. Реализация Tracking.js – одна из самых простых в использовании библиотек компьютерного зрения с низким порогом вхождения. Другими словами, вы можете просто брать ее и сразу же делать удивительные вещи. Вы можете загрузить библиотеку tracking.js из github-репозитория: или подключить npm-пакет: Для оформления интерфейса нам также понадобятся: Подключите файлы стилей и скриптов всех плагинов и библиотек любым удобным для вас способом, например, в секции index.html Код HTML демо-приложения: index.html Здесь также подключаются скрипты: Создание и инициализация слайдера параметра js/range-slider.js Чтобы начать использовать функциональность библиотеки tracking.js, нужно создать объект трекера с помощью конструктора и передать ему цвета для распознавания. По умолчанию предлагается набор из трех цветов: пурпурный (magenta), бирюзовый (cyan) и желтый (yellow). js/color-tracking.js Также можно дополнительно регистрировать любые другие цвета. Для этого предназначен метод API color-tracking.js Этот код отслеживает нажатие на кнопку «Добавить цвет» (Add color) и регистрирует в трекере выбранный в колорпикере цвет. Метод Другими словами, чем больше Метод Когда трекер обнаружит искомые цвета на изображении, он выбросит событие color-tracking.js В объекте события хранятся координаты всех выбранных областей. Для каждой области также доступен цвет, которому она соответствует. Получив эти данные, мы создаем прямоугольные контейнеры с указанными параметрами и помещаем их на превью (метод Теперь осталось только передать трекеру изображение, на котором нужно определить выбранные цвета. Для этого предназначен статический метод библиотеки color-tracking.js В него следует передать селектор целевого элемента Объединим весь код создания и запуска трекера при нажатии на кнопку Track color: Сначала мы должны удалить все области, оставшиеся с предыдущего поиска. Затем придется создать экземпляр трекера с выбранными цветами, установить обработчик события Всю дополнительную функциональность (выбор цвета с помощью пипетки, смена картинки, сброс результатов поиска) вы можете найти в репозитории приложения. *** Кроме обнаружения цвета прямо в браузере (на изображениях и даже на видео), библиотека tracking.js может обнаруживать лица людей, но не распознавать их. Более подробную информацию вы найдете в документации.
tolerance) с помощью слайдера – эта опция непосредственно не входит в библиотеку, мы реализуем ее самостоятельно. Для максимального удобства добавлена пипетка, чтобы можно было брать цвет прямо с картинки.Track color запускает алгоритм распознавания. Найденные области обводятся цветной рамкой.Шаг #1. Подключение ресурсов
git clone https://github.com/eduardolundgren/tracking.js.git
npm install tracking head в html-файле:
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style/color-tracking.css"> <link rel="stylesheet" href="style/color-picker.min.css"> <link rel="stylesheet" href="style/range-slider.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src='js/tracking-min.js'></script> <script src='js/color-picker.min.js'></script> <script src='js/rangeslider.min.js'></script> <script src='js/broiler.js'></script> </head> Шаг #2. Создание интерфейса
<main> <div class="container mt-2"> <div class="row"> <div class="col-12 col-lg-4 col-md-6"> <div class="row col-12 d-block p-0 m-0"> <strong class="d-block">Tracking colors</strong> <div id="color-list" class="row color-list m-0"></div> <hr class="d-block m-3"> </div> <div class="row"> <div class="col-8"> <section id="color-picker"></section> <div class="p-2"> <label for="tolerance" class="font-weight-bold">Tolerance:</label> <input type="range" id="tolerance" name="tolerance" min="0" max="100" value="30" step="1"> <span class="rangeslider__tooltip" id ="range-tooltip"></span> </div> </div> <div class="col-4"> <div id="color-picker-selected"></div> <button id="add-color-button" class="btn btn-primary">Add color</button> </div> </div> </div> <div class="col-12 offset-lg-1 col-lg-7 col-md-6"> <div class="row"> <div class="col-7"> <input id="image-selector" type="file"> </div> <div class="col-5"> <button id="track-button" class="btn btn-dark float-right">Track color</button> </div> </div> <hr class="m-3"> <div class="row"> <div class="col-12"> <div class="row"> <div class="col-7"> <strong class="ml-3">Image</strong> </div> <div class="col-5"> <button id="clear-button" class="btn btn-dark float-right">Clear</button> </div> </div> <div class="col-12 p-0 tooltip" id="image-container"> <img id="selected-image" class="p-0 col-12" src="images/CMYK.jpg" /> <span class="tooltiptext">Click to pick color from image</span> </div> </div> </div> </div> </div> </div> </main> <script src='js/range-slider.js'></script> <script src="js/color-tracking.js"></script> range-slider.js и главный файл color-tracking.js.tolerance – файл range-slider.js:
const $element = $('input[type="range"]'); let $handle; $element .rangeslider({ polyfill: false, onInit: function() { $handle = $('.rangeslider__handle', this.$range); updateHandle($handle[0], this.value); } }) .on('input', function() { updateHandle($handle[0], this.value); }); // Обновление значения в ползунке слайдера function updateHandle(el, val) { el.textContent = val; } Шаг #3. Создание трекера
let regColors = ['magenta', 'cyan', 'yellow']; let tracker = new tracking.ColorTracker(regColors); tracking.ColorTracker.registerColor:
$("#add-color-button").click(async function () { let color = $('#color-picker-selected').css( "background-color" ); regColors.push(color); let t = slider.value; tracking.ColorTracker.registerColor(color, function(r, g, b) { return getColorDistance(getRGB(color), {r: r, g: g, b: b}) < t }); displayColorList(regColors, 'color-list'); }); function getColorDistance(target, actual) { return Math.sqrt( (target.r - actual.r) * (target.r - actual.r) + (target.g - actual.g) * (target.g - actual.g) + (target.b - actual.b) * (target.b - actual.b) ); } registerColor принимает два аргумента: собственно цвет и функцию сравнения, которая будет запускаться для каждого обнаруженного на картинке цвета. В этой функции мы будем вычислять «разницу» между целевым и найденным цветами и сравнивать ее с установленным значением параметра tolerance.tolerance, тем больше диапазон цветов, которые будут считаться подходящими и попадут в выделение.displayColorList выводит все выбранные цвета. Его реализацию вы можете посмотреть в репозитории.Шаг #4. События трекера
track, на которое можно подписаться.
tracker.on('track', function(event) { event.data.forEach(function(rect) { drawRect(rect.x, rect.y, rect.width, rect.height, rect.color); }); }); function drawRect(x, y, w, h, color){ let rect = $('<div></div>'); rect.addClass('rect'); rect.css({ border : '2px solid ' + color, width : w + 'px', height : h + 'px', left : (img.offsetLeft + x) + 'px', top : (img.offsetTop + y) + 'px' }); $('#image-container').append(rect); } drawRect).Шаг #5. Установка изображения
track:
tracking.track('#selected-image', tracker); img (также поддерживаются video и canvas) и экземпляр трекера.
$("#track-button").click(async function () { if($( ".rect" ).length){ $( ".rect" ).remove(); } let tracker = new tracking.ColorTracker(regColors); tracker.on('track', function(event) { event.data.forEach(function(rect) { drawRect(rect.x, rect.y, rect.width, rect.height, rect.color); }); }); tracking.track('#selected-image', tracker); }); track и передать изображение.
- 4 views
- 0 Comment