ionic-framework - 离子导入 Camanjs

Question

我正在尝试在我的 ionic 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>

但如果我服务我

错误参考错误：未定义卡曼

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

[node_modules 文件夹]

你能帮助我吗？

Answer 1

您不能像这样同时声明两者。

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

你只需要使用

import { Caman } from 'caman';

但是您收到错误“模块解析失败：...。”导入没有任何问题，这是因为 CamanJs 使用节点画布。并且画布加载二进制文件。像“canvas.node”。您需要安装 node-loader https://github.com/webpack-contrib/node-loader来解决该错误。

Answer 2

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

import * as Caman from 'caman';