我开发了一个基于 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)