离子进口Camanjs

Question

我试图在我的离子v3项目中使用camanjs库。我使用npm安装caman安装它--保存(还安装了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>

但如果我为你服务

错误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使用节点-画布。画布加载二进制文件。比如"canvas.node“。您需要安装节点加载器https://github.com/webpack-contrib/node-loader来解决该错误。