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