Question

我想剪裁3张图片，然后使用Angular 2上传它们。我整合了Angular 2 Image Cropper“ng2-img-cropper”，但我没有让它工作。

当我运行应用程序并进入实现裁剪器的页面时，我只看到一个小图像方块，当我单击或拖动它时没有任何反应，并且控制台中没有错误。 Figure : Empty image square

我正在使用“ng2-img-cropper@4.6”。

这是我继续实施的方式。我提到了这个Github链接https://github.com/cstefanache/angular2-img-cropper 我将其添加到HTML

中

<div>
    <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
    <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
</div>

这就进入了班级

import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';

data: any; cropperSettings: CropperSettings;

constructor() {

    this.cropperSettings = new CropperSettings();
    this.cropperSettings.width = 100;
    this.cropperSettings.height = 100;
    this.cropperSettings.croppedWidth =100;
    this.cropperSettings.croppedHeight = 100;
    this.cropperSettings.canvasWidth = 400;
    this.cropperSettings.canvasHeight = 300;

    this.data = {};

}

谢谢。

链接到问题Issue

Answer 1

基本上，有两个原因导致您的组件未显示第一个，或者您没有列出您的组件在列表或指令中，或者您在img中没有正确绑定src。否则angular2 image cropper是工作正常，请看这里。

https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

另见

https://stackoverflow.com/a/39096831/5043867

如果您仍然有任何错误，请在附加的plunker中重现您的错误。

Angular 2 ng2-img-cropper未显示组分

1 个答案: