小编kad*_*dar的帖子

如何在不调用 imageChangedEvent 事件的情况下在 ngx-image-cropper 上加载图像?

我开发了一个基于 ngx-image-cropper 的裁剪器,它允许裁剪/旋转一些图像。对于sprint的demo,我希望在应用程序启动时显示图像,所以我需要在不调用fileChangeEvent()事件的情况下在ngx-image-cropper上启动图像。

这是实际结果,它工作正常。

我单击其中一个链接(照片 - 签名 - ...),然后打开文件上传器以选择要裁剪的照片。

在此处输入图片说明

这就是我想要的:

在开始访问页面时,从我的磁盘加载文件,而无需单击链接。

在此处输入图片说明

Ps:我正在使用 Angular 8

这里是裁剪器的代码:

       <mat-card-content style="padding:3% 5%; text-align: center; ">
          <image-cropper [ngClass]=" loaded && showCropper && !cropped ? 'showCropper' : 'hideCropper' "
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="false"
            [containWithinAspectRatio]="containWithinAspectRatio"
            [aspectRatio]="5 / 3"
            [cropperMinWidth]="128"
            [onlyScaleDown]="true"
            [roundCropper]="false"
            [canvasRotation]="canvasRotation"
            [transform]="transform"
            [alignImage]="'center'"
            [style.display]="showCropper ? null : 'none'"
            format="png"
            (imageCropped)="imageCropped($event)"
            (imageLoaded)="imageLoaded()"
            (cropperReady)="cropperReady($event)"
            (loadImageFailed)="loadImageFailed()"
          >
          </image-cropper>
          <img
            *ngIf="loaded && !showCropper && cropped"
            class="document-photo"
            [src]="croppedImage"
          />
          <div *ngIf="!loaded" class="divNone"></div>
          <div class="icon-image">
            <mat-icon (click)="rotateLeft()">rotate_left</mat-icon>
            <mat-icon (click)="rotateRight()">rotate_right</mat-icon>
            <mat-icon (click)="activateCrop()">crop</mat-icon>
            <mat-icon (click)="clearImage()">clear</mat-icon>
            <mat-icon …
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery typescript angular

1
推荐指数
1
解决办法
5365
查看次数

标签 统计

ajax ×1

angular ×1

javascript ×1

jquery ×1

typescript ×1