angularjs多个图像上传与裁剪

时间:2015-04-21 11:54:04

标签: angularjs crop image-uploading

我找到了一个好的angularjs代码,支持使用裁剪工具上传多个图片。

我搜索了很多但是我得到了一个很好的多图片上传或者我得到了单张图像裁剪。

是否有任何东西支持两者。

请帮忙。

2 个答案:

答案 0 :(得分:0)

我在Angular 8中也遇到了同样的问题,所以我对ngx-image-cropper进行了一些更改, 它允许用户上传多张图片,如您在下图所见

like this image it allows multiple image selection from your local system

并通过选择图像裁剪它们 Image Cropper

答案 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');
  }