import { AppManager } from './../../services/AppManager' ; import { Component } from '@angular/core' ; import { NavController , NavParams , ModalController } from '@ionic/angular' ; import { Logging , LogLevel } from '../../services/Logging' ; @ Component ( { templateUrl : 'mediaupload.html' , styleUrls : [ './mediaupload.scss' ] } ) export class MediaUploadPage { mode : string ; processingQuality : number ; imgData : any ; targetWidth : number ; targetHeight : number ; comment : string ; chargePointId : number ; poi : any ; constructor ( public navParams , public appManager , public nav , private modalController , public logging ) { this . processingQuality = 0.8 ; this . targetWidth = 1024 ; this . targetHeight = 800 ; this . mode = appManager . platformMode ; this . chargePointId = this . navParams . get ( 'id' ) ; this . poi = this . navParams . get ( 'poi' ) ; this . comment = '' ; } processNativeImageSource ( imageData ) { let imgUrl = imageData ; const canvas = < HTMLCanvasElement > document . getElementById ( 'img-upload-canvas' ) ; const ctx = canvas . getContext ( '2d' ) ; const img = new Image ( ) ; img . onload = ( ) => { this . logging . log ( "img load:" + img . width ) ; canvas . width = img . width ; canvas . height = img . height ; ctx . fillStyle = 'rgb(0,0,0)' ; ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ; ctx . drawImage ( img , 0 , 0 , canvas . width , canvas . height ) ; this . imgData = canvas . toDataURL ( 'image/png' ) ; this . processImage ( ) ; } ; img . src = imgUrl ; } loadCameraOrLibraryImage ( fromImageLibrary = false ) { this . logging . log ( "PWA mode: fetching image" ) ; const reader = new FileReader ( ) ; reader . onload = ( ) => { this . imgData = reader . result ; this . processImage ( ) ; } ; reader . onerror = ( ) => { } ; reader . readAsDataURL ( ( < any > document . getElementById ( 'img-upload-media' ) ) . files [ 0 ] ) ; } isBrowserMode ( ) { return ( this . appManager . isPlatform ( 'desktop' ) || this . appManager . isPlatform ( 'hybrid' ) ) ; } processImage ( ) { const _appContext = this ; if ( this . imgData != null ) { const canvas = < HTMLCanvasElement > document . getElementById ( 'img-upload-canvas' ) ; const ctx = canvas . getContext ( '2d' ) ; const img = new Image ( ) ; img . onload = ( ) => { canvas . width = img . width ; canvas . height = img . height ; ctx . fillStyle = 'rgb(0,0,0)' ; ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ; ctx . drawImage ( img , 0 , 0 , canvas . width , canvas . height ) ; this . refreshImageFromCanvas ( ) ; } ; img . src = this . imgData ; } else { this . logging . log ( "processImage: nothing to process." ) ; } } refreshImageFromCanvas ( ) { const canvas = < HTMLCanvasElement > document . getElementById ( 'img-upload-canvas' ) ; this . imgData = canvas . toDataURL ( 'image/jpeg' , 0.8 ) ; ( < HTMLImageElement > document . getElementById ( 'preview' ) ) . src = this . imgData ; } rotateImage ( ) { const canvas = < HTMLCanvasElement > document . getElementById ( 'img-upload-canvas' ) ; let rotatedImage = new Image ( ) ; rotatedImage . src = canvas . toDataURL ( ) ; rotatedImage . onload = ( ) => { let origHeight = canvas . height ; let origWidth = canvas . width ; canvas . width = origHeight ; canvas . height = origWidth ; origHeight = canvas . height ; origWidth = canvas . width ; const ctx = canvas . getContext ( '2d' ) ; ctx . save ( ) ; ctx . translate ( origWidth , origHeight / origWidth ) ; ctx . rotate ( Math . PI / 2 ) ; ctx . drawImage ( rotatedImage , 0 , 0 ) ; ctx . restore ( ) ; rotatedImage = null ; this . refreshImageFromCanvas ( ) ; } ; } async performUpload ( ) { if ( ! this . imgData ) { await this . appManager . showToastNotification ( 'Select an image to upload.' ) ; return ; } const submission = { chargePointID : this . chargePointId , comment : this . comment , imageDataBase64 : this . imgData } ; await this . appManager . showLoadingProgress ( 'Uploading photo..' ) ; try { let uploadResult = await this . appManager . submitMediaItem ( submission ) ; this . appManager . dismissLoadingProgress ( ) . then ( ( ) => { this . appManager . showToastNotification ( 'Upload completed' ) ; this . modalController . dismiss ( ) ; } ) ; this . appManager . analytics . appEvent ( "MediaUpload" , "Completed" ) ; } catch ( rejected ) { await this . appManager . dismissLoadingProgress ( ) ; await this . appManager . showToastNotification ( 'Upload failed, please try again.' ) ; this . appManager . analytics . appEvent ( "MediaUpload" , "Failed" ) ; } } async cancel ( ) { await this . modalController . dismiss ( ) ; } }