<div class="content__title">
|
<h1>Image Cropper</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="6">
|
<nz-card>
|
<h3 class="text-md">Select an image file</h3>
|
<button nz-button class="ant-btn__block file-upload mt-sm">
|
<input id="file1" accept type="file" (change)="fileChange($event)" />
|
<i class="anticon anticon-upload"></i><span>Upload a image</span>
|
</button>
|
<h3 class="text-md my-md">Crop type</h3>
|
<nz-radio-group [(ngModel)]="cropperSettings.rounded">
|
<label nz-radio-button [nzValue]="false"><span>Square</span></label>
|
<label nz-radio-button [nzValue]="true"><span>Circle</span></label>
|
</nz-radio-group>
|
<div class="my-md" *ngIf="data1.image">
|
<h3 class="text-md">Cropped image</h3>
|
<img [class.rounded-circle]="cropperSettings.rounded"
|
[src]="data1.image"
|
[width]="cropperSettings.croppedWidth"
|
[height]="cropperSettings.croppedHeight">
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="18">
|
<div nz-row>
|
<div nz-col [nzSpan]="24">
|
<nz-card>
|
<img-cropper #cropper [image]="data1" [settings]="cropperSettings" (onCrop)="cropped($event)"></img-cropper>
|
</nz-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
