2

我正在实现一个 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 照片容器 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 的新手。

我正在使用 Angular 1.6 版本。

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

4

0 回答 0