我创建了一个图库页面,供我拍照。现在,我正在尝试为图像添加裁剪选项,我想使用croppie,但不了解如何在角度7中使用它?
任何其他耕种选项或建议都会受到赞赏。
答案 0 :(得分:2)
您可以使用croppie js。
HTML ==> <div id="croppie" #croppie></div>
TS代码:
// import croppie
import * as Croppie from 'croppie';
// Take Element Ref
@ViewChild('croppie') croppie: ElementRef;
// or you can use using document.getElementById('croppie')
croppieObj; // global obj
onFileChange() {
if (this.croppie && this.croppie.nativeElement.className === 'croppie-container') {
this.croppieObj.destroy();
}
this.croppieObj = new Croppie(document.getElementById('croppie'), {
viewport: {
width: 200,
height: 200
},
boundary: {
width: auto,
height: 300
},
enableResize: true,
enableExif: true,
});
f.onload = (e1: any) => {
this.croppieObj.bind(
{
url: e1.target.result,
}
);
};
f.readAsDataURL(event.target.files[0]);
}
答案 1 :(得分:0)
您可以使用ngx-image-cropper
相关的 TS :
import { Component, ViewChild } from '@angular/core';
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
@ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;
constructor() { }
imageChangedEvent: any = '';
croppedImage: any = '';
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
}
cropIt(evnt) {
console.log(this.croppedImage);
}
}
相关的 HTML :
<input type="file" (change)="fileChangeEvent($event)" />
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
[resizeToWidth]="128"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
<img [src]="croppedImage" />
<button type="button" (click)="cropIt()">save cropped image in Base64 </button>