使用带有Ionic2 +打字稿的普通JS库

Question

I'm trying to use camanjs with my ionic2 + typescript project.

I've also had a look at Ionic and Typings blog post by Mike , however it shows adding a library that is already in Typings

Then I found this blog post from josh on adding goole maps that uses CDN method.

By following both of them I've done following so far,

added camanjs via CDN to the index.html file

#index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<script src="cordova.js"></script>
...

Following is my ts file

#home.ts 
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var Camanjs: any;

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }

  addFilter(){
     Camanjs("#image", function(){
       this.sinCity();
       this.render();
     })
  }
}

and my html file. (when the user click the button I want to apply the filter)

#home.html
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click)="addFilter()">Filter</button>
  <img id='image' src="https://d339b5nop2tkmp.cloudfront.net/uploads/pet_photos/2016/7/13/469479_e76aa_340x340_af1c8.jpg">
</ion-content>

but when I click addFilter() I'm getting the following error

browser_adapter.js:84 ReferenceError: Camanjs is not defined
    at HomePage.addFilter (home.ts:14)
    at DebugAppView._View_HomePage0._handle_click_13_0 (HomePage.template.js:201)
    at view.js:375
    at dom_renderer.js:254
    at dom_events.js:27
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:53)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.runGuarded (zone.js:230)
    at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:86)

However I dont get any compiler errors via the IDE or in the compile time 😞, any help would be much appreciated.

Please note this the extended / more detailed version of my previous question

Answer 1

Instead of using Camanjs... try with this:

Caman('#my-image', function () {
  // ...
});

So replacing Camanjs by just Caman should allow you to call the methods on that library.