0

私の目的:

  • 私のブラウザで画像ファイルをアップロードするには、編集（切り抜きと回転）してダウンロード/アップロードします。

これまでに達成したこと:

  • 画像を回転させることはできますが、一度だけです。

私が直面している問題:

  • 公式ドキュメントに記載されているように、使用できません。this.angularCropper.cropper.rotate(degreeInNumber);このエラーが発生しますCannot read property 'rotate' of undefined。
  • これは、人気のある JS 画像ライブラリであるCropperJSのラッパーであるため、CropperJS の構文this.cropper.rotate(degreeInNumber);(rotateLeft()関数内)を試してみましたが、機能するのは 1 回だけです。関数を 2 回目に呼び出すと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]);
    }
  }
}

私はこれにかなり慣れていないので、誰かが私が見逃している/間違っていることを指摘できますか?

また、トリミングされた画像を元に戻すにはどうすればよいですか?

4

2 に答える 2

0

私はあなたの答えがすべて正しいことを確認しましたが、関数を使用して回転関数を呼び出します。

      <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);
}  };
于 2021-12-16T20:35:10.950 に答える