Canvas based Angular 2 Image Cropper that supports fixed and freeform resizing
npm install ng2-canvas-image-cropper
import { ImageCropperModule } from 'ng2-canvas-image-cropper/image-cropper.module;';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
ImageCropperModule
],
providers: [
// ...
],
bootstrap: [AppComponent]
})
export class AppModule { }
<image-cropper [inputImage] = "imageData" #imageCropper></image-cropper>
<span>File</span>
<input id= "photo" type="file" accept="image/*" (change)="onFileChanged($event)">
<button type="submit" (click) = "onSubmitImage()" name="action">Submit</button>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
imageData: any;
@ViewChild('imageCropper') imageCropper;
constructor(private backendService: BackendService,
private elementRef: ElementRef) {
this.imageData = {};
}
onFileChanged(fileInput){
if (fileInput.target.files && fileInput.target.files[0]) {
var reader = new FileReader();
reader.onload = (e : any) => {
this.imageData = e.target.result;
}
reader.readAsDataURL(fileInput.target.files[0]);
}
}
}
onSubmitImage(){
// Getting a croped image Blob
this.imageCropper.getCropBlob((blob) =>{
let image = blob;
if (fileCount > 0) {
formData.append('userPhoto', image);
this.backendService.updateProfilePhoto(formData).subscribe(data =>{
alert(data.msg);
});
}
});
// Getting raw URL data
this.imageCropper.getImageDataURL('image/jpeg',(URL) =>{
let image = URL;
// Do whatever
});
}
The cropper comes with a handful of settings you can customize to change the appearance and performance of cropper
the crop object inside the image cropper contains all the settings so if you want to change them you have to initialize them after the image cropper was initialized
this.imageCropper.crop.outlineColor = 'rgba(130, 180, 255, 0.9)';
this.imageCropper.crop.shadeOutColor = 'rgba(0,0,0,0.75)';
this.imageCropper.crop.isFixedResize = true;
//Setting the initial size fixes the ratio of the image cropper if isFixedResize is true
this.imageCropper.crop.width = 100;
this.imageCropper.crop.height= 500;