0

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

Community
  • 1
  • 1
sameera207
  • 16,547
  • 19
  • 87
  • 152

1 Answers1

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.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
  • Hey @sebaferreras, thanks for the reply. It did work . I updated `declare var Caman: any;` and start using it as `Caman`. So as I understand declaring the variable will stop typescript complains ?. One more thing to clarify (if possible :)), instead of CDN if I use `npm install`, how can I refer the javascript library in the `.ts` file ?, thanks again :) – sameera207 Aug 21 '16 at 08:04
  • Glad I could help :) Yes, declaring the variable like that is just to avoid typescript complaining about not knowing what that is, but in runtime has no effects. If you add it by using npm (personally I like this approach more than the CDN's one) you need to find the name of the folder inside `node_modules` (let's say is camanjs) and import it like `import * from 'camanjs'` or `import { Caman } from 'camanjs'` if you only use that. You can find an example of this (using moment) [here](http://ionicframework.com/docs/v2/faq/#adding-third-party-libs) – sebaferreras Aug 21 '16 at 08:23