Question

我正在尝试将trackingjs库（https://www.npmjs.com/package/tracking）导入到ionic2项目中。

通过遵循文档（https://ionicframework.com/docs/v2/resources/third-party-libs/），我可以导入lodash库并使用它。

但是跟踪js我得到的只是一个空对象（ tracking === {} ）

import tracking from 'tracking/build/tracking';

我用npm安装了跟踪模块，然后安装了相应的类型（https://www.npmjs.com/package/@types/tracking）。当使用离子服务时，我可以在main.js文件中看到模块中的代码，因此它似乎被正确包含，但我无法使其工作。

我是否遗漏了任何明显的内容，或者是否与该图书馆有更多关系？任何帮助将不胜感激。

Answer 1

试试这个。

import * as tracking from 'tracking/build/tracking';

Answer 2

经过多次试验和错误后，我设法导入并使用tracker.js进入我的Ionic 2应用程序，打字稿为2.2.1。

我的问题是在用户选择的照片上传之前检测它们。

以下是我的解决方案步骤

第一次通过npm安装tracking.js

npm install tracking

第二次将tracking.js文件导入您的离子页面。

注意：检查node_modules / tracking文件夹，找出tracking.js的存储位置。然后使用文件路径，但删除“。js” 最后

//node_modules/tracking/build/tracking.js    
import 'tracking/build/tracking';

在导入“跟踪/构建/跟踪”行后导入face.js分类器文件并声明必要的变量

//node_modules/tracking/build/tracking.js    
import 'tracking/build/tracking';
//node_modules/tracking/build/data/face.js
import 'tracking/build/data/face';

//Declare this variables so they are visible in your code
declare var window: any;
declare var tracking: any;

第4次使用你的代码中的tracker.js api（这仍然可以优化）

  //I prefer to run it after the view has completely loaded
  ionViewDidLoad(){

     //Initialize the tracking object with parameters to track face only
     var tracker = new tracking.ObjectTracker('face');

     //Create an img object
     var img = new Image();

     /** IT IS IMPORTANT TO SET THE HEIGHT AND WIDTH 
      BECAUSE THE IMAGE MIGHT BE TOO SMALL OR TOO BIG FOR 
     YOUR STEPSIZE AND NO FACES WILL BE DETECTED
     I SUGGEST YOU TEST THIS OUT FIRST IN A BROWSER HTML FILE
     TO GET THE CORRECT SIZE FOR YOUR USECASE **/
     img.width = 200;
     img.height = 200;

     //I don't know why I have to set this since I am accessing a local file. 
     img.crossOrigin = '*';

     /** 
       Set the onload callback to make sure the image
       is loaded before we do anything to it
     **/
     img.onload = function() {

        console.log('------------IMAGE LOADED------------');

        /**
         You need to find out what's the best value base on your image size.
         Too small and it might take forever and crash the app.
         Too big and you might miss detecting the small faces.
        **/ 
        tracker.setStepSize(1.7); //Default size based on docs is 1.7

       //Pass the loaded img object and instance of the tracker object to tracker.track() 
       var task = tracking.track(img, tracker);

       //It might take a millisecond or a second before it can find a face
       tracker.on('track', function(event) {


          //If the event.data is empty it means that there are no faces found
          console.log( JSON.stringify(event.data) );

          //Loop Through each faces
          event.data.forEach(function(rect) {
             //Coordinates on where to render the a rectangle in a canvas
             console.log(JSON.stringify(rect));

             console.log('-------------FOUND SOME FACES----------------------');

             //DO WHAT EVER YOU LIKE WITH THE DATA
          });


          //Stop the tracking since I only need to check if there is at least one face
          task.stop();
        });

      }

      //Set the image path you want to track
      img.src =  'assets/img/facetest.jpg';
}

您还可以通过导入eye.js和mouth.js分类器文件
来检测眼睛和嘴巴

//node_modules/tracking/build/data/eye.js
import 'tracking/build/data/eye';
//node_modules/tracking/build/data/mouth.js
import 'tracking/build/data/mouth';

如果要跟踪所有面部，眼睛和嘴巴，请在导入所有分类器文件后使用分类器名称数组作为参数

 var tracker = new tracking.ObjectTracker(['face','eye','mouth']);

Answer 3

＆＃13;

import 'tracking/build/tracking.js';
import 'tracking/build/data/face.js';

const global = <any>window;
this.tracker = new global.tracking.ObjectTracker('face');

＆＃13;

似乎是诀窍，不是离子而是另一个Angular 4项目。

在Ionic2中将trackingjs导入为第三方库

3 个答案: