在Ionic2中導入trackingjs作爲第三方庫

我正在嘗試將trackingjs庫（https://www.npmjs.com/package/tracking）導入到我的ionic2項目中。在Ionic2中導入trackingjs作爲第三方庫

按照文檔（https://ionicframework.com/docs/v2/resources/third-party-libs/），我可以導入lodash庫並使用它。

但隨着跟蹤JS我得到的是一個空對象（跟蹤=== {}）

import tracking from 'tracking/build/tracking';

我安裝與NPM跟蹤模塊，然後安裝了相應的類型（https://www.npmjs.com/package/@types/tracking）。在使用離子服務器時，我可以在main.js文件中看到模塊中的代碼，因此它似乎包含正確，但我無法使其工作。

我錯過了任何明顯的東西，還是有更多的事情與該圖書館？任何幫助將不勝感激。

來源

2016-12-30 Sébastien

你有沒有得到這個工作？ – txavier

試試這個。

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

來源

2016-12-30 15:22:50 raj

嗨，謝謝我試過，但這顯然不是問題。 –

多的試驗和錯誤之後，我已經成功地導入和使用tracker.js到我的離子2應用程序與打字稿2.2.1。

我的問題是檢測用戶選擇的照片上傳之前的臉部。

這裏是我的解決步驟

1日通過NPM安裝tracking.js

npm install tracking

第二進口tracking.js文件到您的網頁離子。

注：檢查node_modules /跟蹤文件夾，並找出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和嘴巴來檢測眼睛和嘴巴。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']);

來源

2017-09-20 11:27:14 MoOp

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

 
const global = <any>window; 
 
this.tracker = new global.tracking.ObjectTracker('face');

後使用分類名稱的數組作爲參數

似乎並不是離子而是另一個Angular 4項目。

來源

2017-10-23 15:39:27

在Ionic2中導入trackingjs作爲第三方庫

回答

相關問題