我找到了一个好的angularjs代码,支持使用裁剪工具上传多个图片。
我搜索了很多但是我得到了一个很好的多图片上传或者我得到了单张图像裁剪。
是否有任何东西支持两者。
请帮忙。
答案 0 :(得分:0)
答案 1 :(得分:-1)
> <div class="multiple-images">
<input type="file" (change)="fileChangeEvents($event)" multiple/>
<div>
<image-cropper
[imageBase64]="imageBase64"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
[resizeToWidth]="128"
[roundCropper]="false"
format="png"
outputType="both"
(imageCropped)="imageCrop($event)"
(imageLoaded)="imageLoad()"
(loadImageFailed)="loadImageFail()"
style="max-height: 33vh"
[style.display]="cropReady ? null : 'none'"
></image-cropper>
</div>
<div *ngFor="let key of objectKeys(croppedImages)">
<img [src]="croppedImages[key]" />
</div>
</div>
//multiple image upload start
imageBase64: string = '';
objectKeys = Object.keys;
fileName: string;
cropReady = false;
croppedImages: any =[];
imageName: string;
fileChangeEvents(event: any): void {
const fileReader = new FileReader();
fileReader.onload = (event: any) => {
this.imageBase64 = event.target.result;
};
fileReader.readAsDataURL(event.target.files[0]);
this.imageName = event.target.files[0].name
console.log(event.target.files[0].name);
}
imageCrop(event: ImageCroppedEvent ) {
this.croppedImages[this.imageName] = event.base64;
}
imageLoad() {
this.cropReady = true;
}
loadImageFail () {
console.log('Load failed');
}