ionic4--图片剪裁

1.安装插件 angular-cropperjs

npm i angular-cropperjs --save
npm install cropperjs

2.创建剪裁Page

ionic g page cropperImage

3.编写html界面

<ion-content class="content">

  <angular-cropper [cropperOptions]="config" [imageUrl]="imageUrl"  #angularCropper></angular-cropper>
 
  <button class="corpCancel" (click)="cancel()">取消</button>
  <button class="corpDefine" (click)="save()">确定</button>
</ion-content>

4.编写css样式

.content {
    background-image: none;
    background: black;
}
.scroll-content{
    padding-top: 0px;
}
.corpDefine,.corpCancel{
    padding: 10px;
    background: #fff;
    width: 20%;
    position: absolute;
    bottom: 10%;
}
.corpCancel{
    left: 20%;
}
.corpDefine{
    left: 60%;
}

5.编写ts文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, Events } from '@ionic/angular';
import { CropperComponent } from 'angular-cropperjs';
import { ActivatedRoute } from "@angular/router";
import { DomSanitizer } from '@angular/platform-browser';

export class CropperImagePage implements OnInit {
    @ViewChild('angularCropper') public angularCropper: CropperComponent;//装饰器获取裁剪元素
    imageData: any;
    imageUrl: any = "";

    config: any = {
        viewMode: 1,
        autoCropArea: 0.8,//初始化裁剪框小于图片宽度
        cropBoxResizable:true,
        dragMode: 'move',
        minContainerWidth: document.body.offsetWidth,//容器的最小宽度
        minContainerHeight: document.body.offsetHeight,//容器的最小高度
        aspectRatio: 16 / 9, //裁剪框的宽高比
        autoCrop: true, //初始化时，自动生成裁剪框 当初始化时，可以自动生成图像。（就是自动显示裁剪框，改成false裁剪框自动消失
        cropend: function () { // 每次裁剪完毕，获取裁剪后的图片
           console.log("finish")
           // this.getCropperImage();//我在最后点击确定的时候再获取的图片，避免iOS获取黑色图片的问题

       }.bind(this),
        ready: function () {
          console.log("ready")
          // this.getCropperImage(); // 初始化后，自动获取默认裁剪区域的图片
          //iOS这个初始化方法会有问题，如果裁剪框不移动的话，获取到的是一张黑色的图片

    }.bind(this)
  };

  constructor(
    private activedRoute: ActivatedRoute,
    private dom: DomSanitizer,
    private navController: NavController,
    public events: Events,
    public loading: LoadingService) { }
  
  ngOnInit() {
    const localImage = this.activedRoute.snapshot.queryParamMap.get('imageSrc');//获取穿过来的截图
    if (localImage) this.imageUrl = this.dom.bypassSecurityTrustUrl(localImage);
  }
  
  getCropperImage() {
    var imageData = this.angularCropper.cropper.getCroppedCanvas({
      width: 750, // 这里配置的是裁剪后，生成后的图片的大小，width和height至少需要设置一个，否则IOS可能无法生成裁剪图片导致上传文件是失败的，
      imageSmoothingEnabled: true,
      imageSmoothingQuality: 'high'
    });
    this.imageData = imageData.toDataURL('image/jpeg');  // 生成base64格式图片;
  }

  cancel() {
    this.navController.pop()
  }

  save() {
    this.getCropperImage()
    this.events.publish('crop-image:result', this.imageData);
    this.navController.pop();
  }

  ionViewWillLeave() {
    this.events.unsubscribe('crop-image:result'); // 退出页面取消订阅
  }  


}

6.其他页面跳转到裁剪页代码

import { NavController, Events } from '@ionic/angular';

 constructor(
    public navController: NavController,
    public loading: LoadingService,
    public common: CommonService,
    public http: HttpService,
    public storage: StorageService,
    public tool: ToolService,
    public translate: TranslateService,
    public file: FileService,
    public events: Events) {
}

this.navController.navigateForward("cropper-image", {

    queryParams: { imageSrc: data.res }

}).then(() => {

    this.events.subscribe('crop-image:result', imgBase64Str => {    
        this.cover = imgBase64Str;//imgBase64Str 是裁剪后base64格式的图片
    });

})

 

效果图如下：

最后感谢这位作者给我的启发：https://blog.csdn.net/zhuxiandan/article/details/107433288