Question

我正在实施一个MEAN应用程序，我想通过使用此应用程序检测照片中的面孔。所以在外部，我尝试使用tracking.js成功实现了人脸检测。现在我想将该实现集成到MEAN应用程序中。所以让我知道如何将非角度依赖项注入控制器，因为我需要在这里使用tracking.js。

这是我的一些代码。

主模块（mainApp.js）：

 var fbApp;
 (function(){
fbApp = angular.module("fbApp",['angularFileUpload','ngRoute'])
.config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/', {
            templateUrl: '../views/login/login.html',
            controller: 'LoginController',
          })
          .when('/home', {
                templateUrl: '../views/home/home.html',
                controller: 'HomeController',
          });
    });
})();

我在这里注入了FileUploader依赖，但这是一个角度模块，我对tracking.js文件的依赖性有点困惑。

在同一个应用程序中，我在不使用angularjs的情况下检测到了脸部。控制器，但那时，图像的id是静态的，而现在它是动态的。

我的主控制器：

 (function(){

     fbApp.controller('HomeController',
                      ['$scope','$location','$routeParams', 
                       'HomeService','FileUploader',
                      function ($scope,$location,
                                $routeParams,HomeService,
                                 FileUploader){

          // here are my functions which controls several home contents
          $scope.getFace = function(feed){
             here I need to get tracking.js help so I am little bit of doubt because of lack of knowledge.
          }


    }
  ]);

 })();

家庭服务是我用于调用API的服务，所以我只想使用tracking.js依赖项并在家庭控制器中使用以下逻辑

function getFace(){

  var img = document.getElementById('feed_image'+id);

  var tracker = new tracking.ObjectTracker(['face']);
  tracker.setStepSize(1.5);

  tracking.track('#feed_image'+id, tracker);

  tracker.on('track', function(event) {
    console.log(event);
    event.data.forEach(function(rect) {
      window.plot(rect.x, rect.y, rect.width, rect.height);
    });
  });

  window.plot = function(x, y, w, h) {
    var rect = document.createElement('div');
    document.querySelector('.card_view_body ').appendChild(rect);
    rect.classList.add('rect');
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
  };
 }

home.html phot container div：

      <div ng-repeat="feed in userFeeds">
            <div class="card_view">
                <div class="card_view_head clearfix">
                    <img class="img-circle" src="{{feed.feedOwnerPic}}" alt="" />
                    <h4>{{feed.feedOwnerName}}</h4>
                </div>
                <div class="card_view_body">
                       <!-- <img id="feed_image}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" onclick="getFace()" class="img-responsive">-->
                       <img id="{{feed._id}}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" ng-click="getFace(feed)" class="img-responsive">
                    <div class="form-group">
                        <p>{{feed.feedDescription}}</p>
                    </div>
                </div>
            </div>
        </div>

我将与此DOM相关的所有角度依赖项和tracking.min.js添加到主视图中，这是我如何对单个图像进行面部检测。

请查看img标记的id，它是动态的，之前它是静态的，因为我尝试了1个图像并保留了getFace（）方法，这是另一个js文件。

我是javascript和angular js的新手。

我使用的是角1.6版本。

如何将angular.js与angularjs一起使用？

Angular JS和Tracking.js面部检测

0 个答案: