Question

我构建了ionic2应用程序 - 基于角度2。在我的应用程序中，我使用 Cropper.js 库让用户编辑他加载的图像。

现在我遇到了问题。当用户加载新图片时，我会在主容器中显示它并打开此图像的裁剪框。

但是裁剪框会显示上一张位于容器上的图像。

对我有用的唯一解决方案是通过setTimeout打开裁剪，但是我们知道这不是一个好的解决方案。

还有别的想法吗？

这是我的代码：

HTML - 容器元素：

<div class="selected-image">
    <img  *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>

现在，用户点击一个按钮从相机添加图片（通过cordova插件），然后我得到图片网址，我将图片推送到图片数组，然后设置currentImage变量来保存新图片。

这是我的 typeScript代码，它还有viewChild来容纳容器。注意setTimeout块，现在它可以正常工作，但是如果我从setTimeout包装器中解开代码 - 它会打开前面图片的裁剪框。

我也尝试将其更改为NgZone.run包装器，但它没有帮助。

export class myClass {

       @ViewChild('selectedPhoto') input: ElementRef;
       pictures: PictureData[] = new Array();
       mainImage: PictureData = new PictureData();
       private cropper: Cropper;

       constructor(public _zone: NgZone) {}


      function addPicture(){
          var self = this;
          Camera.getPicture({
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.CAMERA,
              quality: 95,
              targetHeight: 400,
              targetWidth:400
          }).then((imageURI) => {
                  var picture = {src:imageURI};
                  self._zone.run(() => {
                      self.pictures.push(picture);
                      self.currentImage = picture;
                      setTimeout(() => {
                         if (this.cropper && this.cropper['canvas']) {
                             this.cropper.destroy();
                         }
                         if (!this.cropper || !this.cropper['canvas']) {
                              this.cropper = new Cropper(this.input.nativeElement, {
                                  aspectRatio: 1 / 1,
                                  dragMode: 'crop',
                                  modal: true,
                                  guides: false,
                                  center: true,
                                  highlight: false,
                                  background: false,
                                  autoCrop: true,
                                  autoCropArea: 0.9,
                                  responsive: true,
                                  checkCrossOrigin: false,
                                  crop: (e: Cropper.CropperCustomEvent) => {

                                  }
                            });
                         }
                      }, 2000);
                });
        });

   }

}

P.S。如果您的用户信誉超过1500，请考虑为'cropper.js'创建新标签。

角度为2的Cropper.js：cropper显示previos图像

0 个答案: