[英]How to load the image on the ngx-image-cropper without calling the imageChangedEvent event?
I developed a cropper based on ngx-image-cropper which allows to crop/rotate some images.我开发了一个基于 ngx-image-cropper 的裁剪器,它允许裁剪/旋转一些图像。 For the demo of the sprint, I want the images to be displayed when the application is starting, so I need to initiate the images on ngx-image-cropper without calling the fileChangeEvent() event.
对于sprint的demo,我希望在应用程序启动时显示图像,所以我需要在不调用fileChangeEvent()事件的情况下在ngx-image-cropper上启动图像。
I click on one of the links ( Photo - Signature - ... ) and the file Uploader is opened to choose a photo to crop.我单击其中一个链接(照片 - 签名 - ...),然后打开文件上传器以选择要裁剪的照片。
when accessing the page in the begining, load a file from my disk without clicking on the link.在开始访问页面时,从我的磁盘加载文件,而无需单击链接。
Ps : I m using Angular 8 Ps:我正在使用 Angular 8
And here the code of the cropper :这里是裁剪器的代码:
<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 (click)="validate()">check</mat-icon>
<mat-icon>note_add</mat-icon>
</div>
</mat-card-content>
<mat-list-item class="item-doc text-blue-in">
<mat-icon class="icon-info" matTooltipPosition="above" matTooltip="Info about the photo">info</mat-icon>
<mat-icon *ngIf="!photo" class="text-grey-in">check_box_outline_blank</mat-icon>
<mat-icon *ngIf="photo" class="text-grey-in">check_box</mat-icon>
<input style="visibility: hidden; display: none;" #linkPhoto type="file" (change)="fileChangeEvent($event, 'photo')"/>
<mat-label class="doc-title text-grey-in" (click)="onLoadPhoto()" >Photo</mat-label>
<mat-icon *ngIf="photoSent" class="icon-edit" (click)="editPhoto()">edit</mat-icon >
</mat-list-item>
So the question is : How to load image from disk in the ngx-image-cropper without calling the fileChangedEvent ?所以问题是:如何在 ngx-image-cropper 中从磁盘加载图像而不调用 fileChangedEvent ?
1) if you want instead of selecting an image using the Uploader / open window (from input file) and loading the image from the project directory (with eg assets/images) or entering it as a string (base64) you must add one input: 1)如果您不想使用上传器/打开窗口(从输入文件)选择图像并从项目目录(例如资产/图像)加载图像或将其作为字符串(base64)输入,则必须添加一个输入:
[imageBase64] = "imageBase64String"
where imageBase64String is not (../../assets/image.jpg)其中 imageBase64String 不是 (../../assets/image.jpg)
but the value of base64 (date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)
但是base64的值
(date:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA.....)
2) The author writes that: 2)作者写道:
"All inputs are optional. Either the imageChangedEvent, imageBase64 or imageFile should be set to load an image into the cropper."
“所有输入都是可选的。应该设置 imageChangedEvent、imageBase64 或 imageFile 以将图像加载到裁剪器中。”
And和
Input imageBase64 (string):输入 imageBase64(字符串):
"If you don't want to use a file input, you can set a base64 image directly and it will be loaded into the cropper"
“如果你不想使用文件输入,你可以直接设置一个base64图像,它会被加载到裁剪器中”
3) To not have an error in the console: 3)为了在控制台中没有错误:
"ERROR Error: Uncaught (in promise): Event: {" isTrusted ": true}"
The best addition is ngIf (all might look like this):最好的添加是 ngIf(所有可能看起来像这样):
<image-cropper
*ngIf="imageBase64String"
[imageChangedEvent]="imageChangedEvent"
[imageBase64]="imageBase64String"
...
></image-cropper>
4) And how to add base64? 4)以及如何添加base64?
You can create a function eg getBase64FromFile(img) {...}
and do it using XMLHttpRequest()
+ FileReader()
and assign the result to this.imageBase64String = (base64 as any).result
您可以创建一个函数,例如
getBase64FromFile(img) {...}
并使用XMLHttpRequest()
+ FileReader()
并将结果分配给this.imageBase64String = (base64 as any).result
when ngx-image-cropper loads, eg当 ngx-image-cropper 加载时,例如
ngAfterViewInit (): void {
this.getBase64FromFile('../../assets/image.jpg');
}
See, It's interesting here http://www.programmersought.com/article/52582038406/看,这里很有趣http://www.programmersought.com/article/52582038406/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.