Как повернуть изображение, используя Angular 5 и angular-cropperjs?

Question

Моя цель:

• Чтобы загрузить файл изображения в мой браузер, отредактируйте (обрежьте и поверните) его и загрузите / загрузите.

Чего я добился до сих пор:

• Я просто могу повернуть изображение, но только один раз.

С какими проблемами я сталкиваюсь:

• Как уже упоминалось в официальных документах, я не могу использовать this.angularCropper.cropper.rotate(degreeInNumber); это дает эту ошибку: Cannot read property 'rotate' of undefined,
• Поскольку это обертка вокруг популярной библиотеки изображений JS CropperJS, поэтому я попробовал синтаксис CropperJS this.cropper.rotate(degreeInNumber); (внутри rotateLeft() функция), и это работает, но только на этот раз. Когда я звоню rotateLeft() функция во второй раз не работает.
• Кроме того, несмотря на упоминание crossorigin в <input>, Я собираюсь Cannot read property 'checkCrossOrigin' of undefined

Вот мой код для app.component.html:

<input crossorigin type='file' (change)="readUrl($event)">
<img crossorigin id="img" [src]="url">

<div id="target"></div>

<div [hidden]="!(url != null)">
  <angular-cropper crossorigin [cropperOptions]="cropper" [imageUrl]="url" #angularCropper></angular-cropper>
</div>

<br><br>
<button (click)="rotateLeft()">Left</button>               

И мой app.component.ts:

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

import { AngularCropperjsComponent } from 'angular-cropperjs';
import { ViewChild } from '@angular/core';

import * as Cropper from 'cropperjs/dist/cropper';

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

  @ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;

  title = 'app';
  tilt = 0;
  url: string = null;
  cropper: Cropper;

  rotateLeft() {
    let image = document.querySelector('#img');
    let canvas = document.querySelector('#canvas');
    let target = document.querySelector('#target');
    this.tilt -= 90;
    let that = this;
    this.cropper = new Cropper(image, {
      minContainerWidth: 400,
      minContainerHeight: 400,
      minCanvasWidth: 250,
      minCanvasHeight: 250,
      ready: function() {
        this.cropper.rotate(that.tilt);          <--- This works, but only for ONCE
      }
    });

    this.angularCropper.cropper.rotate(66);    <--- This does NOT work
    console.log(this.cropper)

  }

  // This is for showing the uploaded image to <img crossorigin id="img" [src]="url">
  readUrl(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.url = e.target.result;
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  }
}

Я новичок в этом вопросе. Может ли кто-нибудь указать, что я пропускаю / делаю неправильно?

Кроме того, как мне вернуть обрезанное изображение?

Answer 1

  <div class="contant-size-container" style="overflow: hidden; width: 500px; height: 500px">
    <div class="dynanmic-img-container" style="overflow: hidden; margin: 0;"
      [style.margin-left.px]="-left"
      [style.margin-top.px]="-top"
      [style.width.px]="width - right"
      [style.height.px]="height - bottom"
    >
      <img class="dynamic-img"
        [style.height.px]="height"
        [style.width.px]="width"
        [style.transform]="'rotate(' + rot + 'deg)'"
        src="{{file.url}}"
      />
    </div>
  </div>
  <div style="margin-top: 20px">
    <input [(ngModel)]="height"/>
    <input [(ngModel)]="width"/>
    <input [(ngModel)]="rot"/>
  </div>
  <div style="margin-top: 20px">
    <input [(ngModel)]="top"/>
    <input [(ngModel)]="right"/>
    <input [(ngModel)]="bottom"/>
    <input [(ngModel)]="left"/>
  </div>

Я никогда не использовал angularCropper, но это, кажется, делает довольно хорошую работу, позволяя пользователю вводить числа для регулировки размера, поворота и обрезки. Это работает лучше всего, если изображение остается повернутым на кратные 90 градусов. Изображение обрезается под углом из-за div обтекания, который остается той же ширины и высоты изображения. Вы можете сделать это вращение div вместо img, но тогда вам нужно будет использовать css, чтобы убедиться, что изображение остается на расстоянии от внешнего div, так что оно не обрезается.

Значения right, left, top, bottom, width, height и rot являются глобальными переменными в моем файле машинописи.

Внешний самый div, контейнер постоянного размера, используется для предотвращения перемещения всех других элементов на экране, когда внутренний div и img изменяют размер.

Это немного чересчур, на мой взгляд, но это неплохое начало для настройки вашего собственного изображения. Можно использовать больше CSS, чтобы лучше расположить изображение и сохранить его соотношение.

Answer 2

Я проверил ваш ответ, все правильно, но я использую функции для вызова функций поворота.

            <div #imageID class="modal-body" style="height: auto">
      <!-- Cropper -->
      <angular-cropper
        #angularCropper
        [cropperOptions]="config"
        (export)="resultImageFun($event)"
        [imageUrl]="editedFile"
      ></angular-cropper>
    </div>
    <div class="modal-footer">
        <img class="rotate" src="../../assets/images/rotateRight.png" (click)="cropperRotate('right')" />
        <img class="rotate" src="../../assets/images/rotateLeft.png" (click)="cropperRotate('left')" />

        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="savecropedPhoto()">Crop</button>
    </div>

И мой файл .ts

       cropperRotate(data) {
console.log('coming');
this.angularCropper.exportCanvas();
switch (data) {
  case 'right':
    this.angularCropper.cropper.rotate(90);
    break;
  case 'left':
    this.angularCropper.cropper.rotate(-90);
    break;
  default:
    break;
}}

Может быть, это поможет. Это работает для меня. угловая версия: 13

Конфиг углового обрезателя:

        config = {
dragMode: 'move',
background: true,
movable: true,
rotatable: true,
scalable: true,
zoomable: true,
viewMode: 1,
checkImageOrigin: true,
checkCrossOrigin: true,
ready: function () {
  this.cropper.rotate(this.tilt);
}  };