npm i ngx-image-cropper

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ImageCropperModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({

imports: [ BrowserModule, FormsModule, ImageCropperModule ],

declarations: [ AppComponent, HelloComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  imageChangedEvent: any = '';
croppedImage: any = '';

fileChangeEvent(event: any): void {
  console.log(event.target.files[0]);
    this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;

  const blobFile = event.file;
  console.log(blobFile)
  console.log(new window.File([blobFile], blobFile.name, {type: blobFile.type}))
}
imageLoaded() {
    // show cropper
}
loadImageFailed() {
    // show message
}
}

import { Component } from '@angular/core';

import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

imageChangedEvent: any = '';

croppedImage: any = '';

fileChangeEvent(event: any): void {

console.log(event.target.files[0]);

this.imageChangedEvent = event;

}

imageCropped(event: ImageCroppedEvent) {

this.croppedImage = event.base64;

const blobFile = event.file;

console.log(blobFile)

console.log(new window.File([blobFile], blobFile.name, {type: blobFile.type}))

}

imageLoaded() {

// show cropper

}

loadImageFailed() {

// show message

}

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="1"
    [resizeToWidth]="128"
    format="png"
    outputType="both"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

<p>

Start editing to see some magic happen :)

</p>

<image-cropper

[imageChangedEvent]="imageChangedEvent"

[maintainAspectRatio]="true"

[aspectRatio]="1"

[resizeToWidth]="128"

format="png"

outputType="both"

(imageCropped)="imageCropped($event)"

(imageLoaded)="imageLoaded()"

(loadImageFailed)="loadImageFailed()"

></image-cropper>

Build a Angular Image Cropper Editor With Live Preview & Controls Using ngx-image-cropper in TS

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives