资源文件Github：Cropper.js官方

主要只用到官方项目中的dist目录下的两个cropper.min.css和cropper.min.js文件

效果：

html:

    
    <input  #imageInput accept=".jpg,.png,.jpeg" type="file" (change)="imageChangeEvent($event)" /> 

    <div class="copperArea">
      <div class="leftCopper"> 
         <img  #imgCropper class="cropperMain" /> 
      </div>
      <div class="rightPreview">
        <div>
          <div class="liTitle">预览</div>
          <img class="preImg" [src]="croppedImage" /> 
        </div>
        
        <div>
          <div class="liTitle">工具</div>
          <div class="toolArea "> 
            <div class="J_KnowBtn btnTheme" (click)="rotateImage()">旋转图片</div> 
            <div class="J_KnowBtn btnTheme" (click)="sureCropper()">确认裁剪</div>
          </div>        
        </div> 
      </div> 
    </div> 

ts:

import { Component,OnInit, ElementRef,ViewChild, ViewEncapsulation } from '@angular/core'; 
import Cropper from '../src/cropper.min.js'

@Component({
  selector: 'cropper-image',
  templateUrl: './cropper-image.component.html',
  styleUrls: ['./cropper-image.component.scss',"../src/cropper.min.css"],
  encapsulation:ViewEncapsulation.None//样式不进行封装
})

export class CropperImageComponent implements OnInit { 
  @ViewChild('imageInput') imgInput:ElementRef;//input=file的事件容器
  @ViewChild('imgCropper') imgCropper:ElementRef;//装裁剪图片的容器
  myCropper: any;//当前的裁剪对象
  croppedImage: any = '';//当前实时裁剪后的base64
  nowRotate=0;//旋转度数
  imageChangeEvent(event: any): void {  
    // console.log(event); 
    const fr = new FileReader(); 
    fr.readAsDataURL(event.path[0].files[0]); 
    fr.onload = ()=>{
      this.imgCropper.nativeElement.src=fr.result; 
      this.iniCropper();
    }; 
  }
  iniCropper() { 
    this.myCropper = new Cropper(this.imgCropper.nativeElement, {
      aspectRatio: 2 / 1, 
      // preview: '.preImg',//自动存放原图供预览，定义一个div用class名即可
      //其他还有很多属性,可以参见官方文档或文章末尾 
      crop:event=> { 
        this.croppedImage= this.myCropper.getCroppedCanvas({//直接转了base64
          imageSmoothingQuality: 'high'
        }).toDataURL('image/jpeg') 
      },
   });
 }
  rotateImage(){ 
   this.nowRotate+=90;
   this.myCropper.rotateTo(this.nowRotate) 
  } 
  sureCropper(){ 
    console.log("base64图片:",this.croppedImage);
    //this.base64toFile(this.croppedImage)//可以自己将base64转file对象然后传输
    this.imgInput.nativeElement.value="";//补坑，防止第二次点击不触发imageChangeEvent事件

  }
}

附上base64转file方法：

 base64toFile(base, filename="未命名") {//将base64转换为文件
    var arr = base.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename+".png", {type:mime});
  }

主要遇到的问题有css不生效，所以引入了encapsulation:ViewEncapsulation.None//样式不进行封装

其他初始化属性 ，防止博客跑丢了，截个图，源博客地址：Cropper.js中文文档