Clash Royale CLAN TAG

How to import camanjs in ionic properly?

I tried to install camanjs on my ionic project.

I add to my app module :

import * as Caman from 'caman';


add it in provider :

@NgModule({

providers: [
Caman
]
})


on my home.ts :

home.ts

import * as Caman from 'caman';

addBrightness(){
Caman('#caman-image', function () {
this.brightness(50).render();
});
}

getPicture(sourceType:PictureSourceType) {
this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: sourceType,
allowEdit: true,
saveToPhotoAlbum: false,
correctOrientation: true
}).then((imageData) => {

this.selectedImage = `data:image/jpeg;base64,${imageData}`;

});
}


and in my home.html:

home.html

<button ion-button full (click)="addBrightness()" [disabled]="!selectedImage">Add Brightness</button>

<img [src]="selectedImage" #caman-image *ngIf="selectedImage">


and when I execute ionic cordova emulate browser, I got this error :

ionic cordova emulate browser

[09:51:52] ionic-app-script task: "build"
[09:51:52] Error: ./node_modules/canvas/build/Release/canvas.node Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @
./node_modules/canvas/lib/bindings.js 3:17-56 @ ./node_modules/canvas/lib/canvas.js @
./node_modules/caman/dist/caman.full.js @ ./src/app/app.module.ts @ ./src/app/main.ts
Error: ./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/canvas/lib/bindings.js 3:17-56
@ ./node_modules/canvas/lib/canvas.js
@ ./node_modules/caman/dist/caman.full.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts


I tried to search how to add caman properly to ionic , but I cant find it.

Please help me how to install and use caman in ionic or angular 4 please

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.