如何使用Angular 5和angular-cropperjs旋转图像？ [英] How to rotate an image using Angular 5 and angular-cropperjs?

问题描述

我的目标：

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

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

What I have achieved so far:

• 我只能旋转图像但只能旋转一次。

我面临的问题：

• 正如官方提到的 docs ，我无法使用 this.angularCropper.cropper.rotate（degreeInNumber）; 它会出现此错误：无法读取未定义的属性'rotate'。


• 因为它是 CropperJS 一个流行的JS图像库，所以我尝试了CropperJS的语法 this.cropper.rotate（degreeInNumber）; （里面 rotateLeft（） function）它的工作原理但只是一次。当我第二次调用 rotateLeft（）函数时它不起作用。


• 另外，尽管提到在< input> 中的crossorigin ，我收到无法读取未定义的属性'checkCrossOrigin'

• As mentioned in the official docs, I'm not able to use this.angularCropper.cropper.rotate(degreeInNumber); it gives this error: Cannot read property 'rotate' of undefined .
• As it is a wrapper around CropperJS a popular JS image library, so I tried CropperJS's syntax this.cropper.rotate(degreeInNumber); (inside rotateLeft() function) and it works but just for once. When I call rotateLeft() function for the second time it does not work.
• Also, despite mentioning crossorigin in <input>, I'm getting 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]);
    }
  }
}

我很新任何人都可以指出我错过了什么/做错了什么？

I'm pretty new to this can anyone please point out what am I missing/ doing wrong?

另外，如何取回裁剪后的图像？

Also, how do I get back the cropped image?

推荐答案

  <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一定距离，这样它就不会被截止。

I have never used angularCropper, but this seems to do a pretty good job of allowing a user to type in numbers for adjusting size, rotating and cropping. This works best if the image remains rotated at a multiple of 90 degrees though. The image becomes cropped at an angle because of the wrapping div that remains the same width and height of the image. You could have this div rotate instead of the img, but then you would need to use css to make sure the image remains at a distance away from the outermost div such that it does not get cutoff.

值right，left，top，bottom，width，height和rot都是我的打字稿文件中的全局变量。

The values right, left, top, bottom, width, height and rot are all global variables in my typescript file.

最外层的div，恒定大小的容器，用于在内部div和img改变大小时保持所有其他元素不在屏幕上移动。

The outer most div, constant-size-container, is used for keeping all other elements from moving on the screen when the inner div and img change size.

在我看来，这有点过于苛刻，但这是一个很好的开始做自己的图像定制。更多css可用于更好地定位图像并帮助保持其比例。

This is a little overly hacky in my opinion, but it is a decent start at doing your own image customizing. More css can be used to better position the image and help to retain its ratio.

这篇关于如何使用Angular 5和angular-cropperjs旋转图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！