Using a normal JS librarary with Ionic2 + typescri

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

标签： angular ionic2 camanjs

举报

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.