Угловой 7: Как использовать кроппи или любой другой кроппер - PullRequest
Новая
       12

Угловой 7: Как использовать кроппи или любой другой кроппер

0 голосов
/ 26 июня 2019

Я создал страницу галереи, где я снимаю изображения.Сейчас я пытаюсь добавить опцию обрезки для изображения, я хотел использовать croppie , но не понимаю, как использовать его в angular 7?

Будем благодарны за любые другие варианты или предложения обрезки.

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете использовать ngx-image-cropper

релевантно TS : 

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

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

  constructor() { }
  imageChangedEvent: any = '';
  croppedImage: any = '';

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }
  cropIt(evnt) {
    console.log(this.croppedImage);
  }

}

релевантно HTML : 

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

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

<img [src]="croppedImage" />

<button type="button" (click)="cropIt()">save cropped image in Base64 </button>

работает стек * здесь

...