如何使用 Angular 5 和 angular-cropperjs 旋转图像？

Question

我的目标：

• 要在我的浏览器中上传图片文件，请编辑（裁剪和旋转）并下载/上传。

到目前为止我所取得的成就：

• 我只能旋转图像一次。

我面临什么问题：

• 正如官方docs 中提到的，我无法使用this.angularCropper.cropper.rotate(degreeInNumber); 它给出了这个错误：Cannot read property 'rotate' of undefined。
• 因为它是一个流行的 JS 图像库 CropperJS 的包装器，所以我尝试了 CropperJS 的语法 this.cropper.rotate(degreeInNumber);（在 rotateLeft() 函数内），它但只工作一次。当我第二次调用rotateLeft() 函数时，它不起作用。
• 另外，尽管在<input> 中提到了crossorigin，但我得到了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 在我的 typescript 文件中都是全局变量。

最外层的 div，constant-size-container，用于在内部 div 和 img 改变大小时阻止所有其他元素在屏幕上移动。

在我看来，这有点过于 hacky，但它是进行自己的图像定制的一个不错的开始。更多的 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);
}  };