2

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

现在我有一个问题。当用户加载新图片时，我将其显示在主容器中并打开此图像的裁剪框。

但是裁剪框显示了容器中的前一个图像。

唯一对我有用的解决方案是通过 setTimeout 打开作物，但正如我们所知，这不是一个好的解决方案。

还有什么想法吗？

这是我的代码：

HTML - 容器元素：

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

现在，在用户单击按钮从相机添加图片（通过cordova插件）后，我得到了图片url，我将图片推送到图片数组，然后设置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);
                });
        });

   }

}

PS 如果您是拥有超过 1500 名声望的用户，请考虑为“cropper.js”创建新标签。

4

0 回答 0