import { Component , OnInit , ViewChild , ElementRef } from '@angular/core' ; import * as Cropper from 'cropperjs/dist/cropper' ; import { ModalController , ActionSheetController , Platform } from '@ionic/angular' ; import { Camera , CameraOptions } from '@ionic-native/camera/ngx' ; import { UserService } from '../../services/user.service' ; @ Component ( { selector : 'app-avatar-picker' , templateUrl : './avatar-picker.component.html' , styleUrls : [ './avatar-picker.component.scss' ] , providers : [ Camera ] } ) export class AvatarPickerComponent implements OnInit { showCommitment = true ; cropper : Cropper ; avatar64 ; @ ViewChild ( 'image' , { read : ElementRef , static : false } ) image : ElementRef ; actionSheet ; constructor ( private modal , private userService , private actionSheetCtrl , private platform , private camera ) { } ngOnInit ( ) { } ngAfterViewInit ( ) { } close ( ) { this . modal . dismiss ( ) ; } async showActionSheet ( ) { this . actionSheet = await this . actionSheetCtrl . create ( { header : '修改头像' , buttons : [ { text : '手机拍照' , handler : ( ) => { this . getPicture ( 1 ) ; } } , { text : '本地图片' , handler : ( ) => { this . getPicture ( 0 ) ; } } ] } ) ; await this . actionSheet . present ( ) ; } tempImgFile ; getPicture ( sourceType ) { if ( this . platform . is ( 'cordova' ) ) { const options = { quality : 50 , sourceType : sourceType , destinationType : this . camera . DestinationType . DATA_URL , encodingType : this . camera . EncodingType . JPEG , mediaType : this . camera . MediaType . PICTURE } ; this . camera . getPicture ( options ) . then ( ( imageData ) => { this . tempImgFile = 'data:image/jpeg;base64,' + imageData ; this . cropImage ( ) ; } , ( err ) => { console . log ( "获取图片失败" ) ; } ) ; } else { this . tempImgFile = 'assets/img/panda.jpg' ; this . cropImage ( ) ; } } confirm ( ) { let croppedImg = this . cropper . getCroppedCanvas ( { width : 300 , height : 300 } ) ; if ( ! HTMLCanvasElement . prototype . toBlob ) { Object . defineProperty ( HTMLCanvasElement . prototype , 'toBlob' , { value : function ( callback , type , quality ) { var binStr = atob ( this . toDataURL ( type , quality ) . split ( ',' ) [ 1 ] ) , len = binStr . length , arr = new Uint8Array ( len ) ; for ( var i = 0 ; i < len ; i ++ ) { arr [ i ] = binStr . charCodeAt ( i ) ; } callback ( new Blob ( [ arr ] , { type : type || 'image/png' } ) ) ; } } ) ; } croppedImg . toBlob ( blob => { this . userService . uploadAvatar ( blob ) . then ( result => { this . close ( ) ; } ) ; } , 'image/jpeg' , 0.6 ) ; } cropImage ( ) { setTimeout ( ( ) => { if ( typeof this . cropper != 'undefined' ) { this . cropper . destroy ( ) ; } this . cropper = new Cropper ( this . image . nativeElement , { dragMode : 'move' , aspectRatio : 1 , viewMode : 1 , modal : true , guides : false , highlight : true , center : false , background : false , autoCrop : true , autoCropArea : 0.8 , movable : true , zoomable : true , cropBoxMovable : false , cropBoxResizable : false , checkOrientation : true , rotatable : true , scalable : true } ) ; } , 500 ) ; } rotate ( ) { this . cropper . rotate ( 90 ) ; } closeCommitment ( ) { this . showCommitment = false ; } }