我是角度 5 的新手,正在努力在我的应用程序中实现角度裁剪饼模块。我试图在模块 github 上得到一些答案,但没有成功。似乎croppie.directive.d.ts只设法导入"Croppie"命名空间,而不是类。结果,一旦我到达带有模块的页面,我就会得到
错误类型错误:__WEBPACK_IMPORTED_MODULE_1_croppie___default.a 不是构造函数
我创建了一个 github 存储库来展示问题的简单演示https://github.com/ErwinSanquer/croppie-demo
谢谢
我正在使用 angular4 并发现 croppie 很容易单独使用,然后您可以使用 croppie 文档来找出要调用的方法。我只是做了:
npm install croppie
然后创建了一个组件来使用它(这里是组件的简化版本(:
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
import { Croppie } from 'croppie/croppie'; // Reference: http://foliotek.github.io/Croppie/
@Component({
selector: 'image-upload',
templateUrl: './image-upload.component.html',
styleUrls: ['./image-upload.component.scss']
})
export class ImageUploadComponent implements OnInit, OnDestroy {
uploadElement: any;
croppie: any;
imageChanged: boolean = false;
constructor() { }
ngOnInit() {
this.initCroppie();
this.initFileUpload();
}
initCroppie() {
const cropElement = document.getElementById('imageUploadItem');
this.croppie = new Croppie(cropElement, {
viewport: { width: 200, height: 200, type: 'circle' },
boundary: { width: 200, height: 200 },
enableOrientation: true
});
let preloadedImageUrl = Constants.DEFAULT_PROFILE_IMG_URL;
this.croppie.bind({
url: preloadedImageUrl,
zoom: 0
});
}
initFileUpload() {
this.uploadElement = document.getElementById('fileUploadInput');
this.uploadElement.addEventListener('change', this.onFileUpload.bind(this));
}
onFileUpload() {
if (this.uploadElement.files && this.uploadElement.files.length > 0) {
this.imageChanged = true;
const file = this.uploadElement.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = ((event: any) => {
this.croppie.bind({
url: event.target.result
});
});
}
}
rotateLeft() {
this.croppie.rotate(90);
this.imageChanged = true;
}
rotateRight() {
this.croppie.rotate(-90);
this.imageChanged = true;
}
getCroppieImage(quality: number, numCalls: number): Promise<any> {
return this.croppie.result({
type: 'blob',
size: {
width: 500,
height: 500
},
format: 'jpeg',
quality: quality,
circle: false
})
.then((imageDataBlob) => {
// If image size is still too large just call result again with lower quality
if (imageDataBlob.size > 500000 && numCalls < 3) {
quality = quality - 0.1;
numCalls++;
return this.getCroppieImage(quality, numCalls);
} else {
return imageDataBlob;
}
});
}
ngOnDestroy() {
this.uploadElement.removeEventListener('change', this.onFileUpload);
}
}
确保模板有一个 id='imageUploadItem' 的div 供裁剪饼居住,如果你让用户上传图像(就像我在上面的组件中所做的那样(,请确保你有一个 type=file 的输入,id='fileUploadInput'。
更新 :
此问题已在版本 0.0.6 中修复https://github.com/gatimus/angular-croppie/issues/4