离子导入Camanjs

Question

我试图在我的离子v3项目中使用camanjs库。我使用npm install caman --save（也安装了cairo，libjpg和libpng）安装它。现在在我的项目文件夹中，我可以在node_modules文件夹中看到一个名为caman的文件夹，所以在我的.ts中我写了

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Caman } from 'caman';

declare var Caman: any;

@Component({
  selector: 'page-filtri',
  templateUrl: 'filtri.html'
})
export class FiltriPage {

  constructor(public navCtrl: NavController) {

  }

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

}

和html文件

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="addFilter()">Filtro</button>
  <img id='image' src="https://firebasestorage....">
</ion-content>

但如果我服务我

  

ERROR ReferenceError：未定义Caman

这就是我的node_modules文件夹的样子

[node_modules文件夹]

你能帮助我吗？

Answer 1

为什么不尝试将导入更改为以下内容：

import * as Caman from 'caman';

Answer 2

你不能同时宣布这两个。

import { Caman } from 'caman'; declare var Caman: any;

你只需要使用

import { Caman } from 'caman';

但是你得到错误“模块解析失败：....”由于CamanJs使用了node-canvas，因此导入没有任何问题。并且canvas加载二进制文件。比如“canvas.node”。您需要安装node-loader https://github.com/webpack-contrib/node-loader来解决该错误。