angular2-img-cropper not maintaining the size of actual Image - image

Question

I'm trying to upload Image of 4160 * 3120 size and using ng2 Image cropper to maintain the ratio of uploaded Image. but it is uploading fix sized (750* 400 ) Image every time regardless of the actual size of the cropper.
this.cropperSettings2 = new CropperSettings();
this.cropperSettings2.width = 750;
this.cropperSettings2.height = 400;
this.cropperSettings2.keepAspect = true;
this.cropperSettings2.croppedWidth = 750;
this.cropperSettings2.croppedHeight = 400;
this.cropperSettings2.canvasWidth = 427.367;
this.cropperSettings2.canvasHeight = 224;
this.cropperSettings2.minWidth = 750;
this.cropperSettings2.minHeight = 400;
this.cropperSettings2.rounded = false;
this.cropperSettings2.minWithRelativeToResolution = false;
this.cropperSettings2.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
this.cropperSettings2.cropperDrawSettings.strokeWidth = 2;
this.cropperSettings2.noFileInput = true;
this.data2 = {};
Is it a bug or I'm doing something wrong?

Answer 1

In your HTML, you have onCrop event
<div>
<img-cropper [image]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)"></img-cropper>
<span class="result" *ngIf="data1.image" >
<img [src]="data1.image" [width]="cropperSettings1.croppedWidth" [height]="cropperSettings1.croppedHeight">
</span>
<button class="btn-primary" (click)="finalCropped($event)">Upload</button>
In your .ts file define that method named cropped()
cropped(bounds: Bounds) {
this.cropperSettings1.croppedHeight = bounds.bottom - bounds.top;
this.cropperSettings1.croppedWidth = bounds.right - bounds.left;
console.log("cropped width: " + this.cropperSettings1.croppedWidth);
console.log("cropped height: " + this.cropperSettings1.croppedHeight);
}
finalCropped(){
// upload cropped image using some service.
this.uploadStr(this.data1.image);
}
uploadStr(base64Str: string) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (ev: ProgressEvent) => {
//You can handle progress events here if you want to track upload progress (I used an observable<number> to fire back updates to whomever called this upload)
console.log(ev);
this.percentageUpload = (ev.loaded / ev.total * 100).toFixed(1).toString() + " %"
});
xhr.upload.addEventListener('loadstart', (ev: ProgressEvent) => {
// When the request starts.
this.showProgressBar = true;
console.log(ev);
});
xhr.upload.addEventListener('load', (ev: ProgressEvent) => {
// When the request has *successfully* completed.
// Even if the server hasn't responded that it finished.
this.showProgressBar = false;
console.log(ev);
});
xhr.upload.addEventListener('loadend', (ev: ProgressEvent) => {
// When the request has completed (either in success or failure).
// Just like 'load', even if the server hasn't
// responded that it finished processing the request.
setTimeout(function () {
alert('Upload complete, please save profile settings ');
}, 1000);
this.showProgressBar = false;
// this.currentProject.Logo = ;
console.log(ev);
});
xhr.upload.addEventListener('error', (ev: ProgressEvent) => {
// When the request has failed.
this.showProgressBar = false;
console.log(ev);
});
xhr.upload.addEventListener('abort', (ev: ProgressEvent) => {
// When the request has been aborted.
// For instance, by invoking the abort() method.
this.showProgressBar = false;
console.log(ev);
});
xhr.upload.addEventListener('timeout', (ev: ProgressEvent) => {
// When the author specified timeout has passed
// before the request could complete.
this.showProgressBar = false;
console.log(ev);
});
var blobObj = this.convertToBlob(base64Str);
this.s3urlService.getPreSignedURL("project")
.subscribe(data => {
this.s3data = data;
this.setFormImageUrl(this.s3data.fileName);
console.log("Url to upload: " + this.s3data.fileUploadUrl);
xhr.open("PUT", this.s3data.fileUploadUrl, true);
xhr.send(blobObj);
})}
aws s3 service class to upload data to s3.
import { Injectable } from '#angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { ApiService } from './api.service';
import { JwtService } from './jwt.service';
import { S3Url } from '../models';
#Injectable()
export class S3urlService {
constructor (
private apiService: ApiService,
private jwtService: JwtService
) {}
getPreSignedURL(imageType?:string): Observable<S3Url> {
let requestBody = {
Username:this.jwtService.getUsername(),
FileExt:"jpg",
ImageType: imageType
}
//console.log("in getPreSignedURL");
return this.apiService.post('/',requestBody,2)
.map(data => {
return data;
});
}}
Hope, this solves your problem.