Ionic cordova camera 사용하여 post로 이미지 전송하기

필요한 플러그인

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

$ npm i blueimp-load-image 

먼저 ActionSheet를 만들어줍니다.

presentActionSheet() { let actionSheet = this.actionSheetCtrl.create({ title: 'Upload Image', buttons: [ { text: 'Take Photo', handler: () => { const options = { destinationType: Camera.DestinationType.DATA_URL, // android에선 FILE_URI를, ios에서는 NATIVE_URI를 사용하면 file path를 받아올 수 있다는데 // ios에서는 file path가 아닌 data로 받아오기에 둘 다 사용할 수 있는 DATA_URL을 사용함 encodingType: Camera.EncodingType.JPEG, sourceType: Camera.PictureSourceType.CAMERA, correctOrientation: true }; this.getResult(options); } }, { text: 'Choose From Library', handler: () => { const options = { destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, saveToPhotoAlbum:false, correctOrientation: true }; this.getResult(options); } }, { text: 'Cancel', role: 'cancel', handler: () => { } } ] }); actionSheet.present(); }

dataToBlob(dataURI, mimeType) { let binary = atob(dataURI); let array = []; for(let i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type: mimeType}); } getResult(options) { Camera.getPicture(options).then((imageData) => { const blob = this.dataToBlob(imageData, 'image/jpeg'); loadImage.parseMetaData(blob, data => { if (!data.exif || !data.exif.get('ImageWidth')) { // ios에선 exif를 받아오지 못함 this.setImageSize(imageData).then(() => { this.searchByImageFile(blob); }); } else if (data.exif.get('Orientation') === 1) { // image의 orientation이 정상적으로 온 경우 this.dimension.width = data.exif.get('ImageWidth'); this.dimension.height = data.exif.get('ImageHeight'); this.searchByImageFile(blob); } else { loadImage( // import * as loadImage from 'blueimp-load-image'; blob, canvas => { // android camera에서 이미지가 회전되어 오는 경우가 있어 canvas에 넣어 회전시킴 this.dimension.width = canvas.width; this.dimension.height = canvas.height; let imageData = canvas.toDataURL('image/jpeg', .5); let newBlob = this.dataToBlob(imageData.split(',')[1], 'image/jpeg'); this.searchByImageFile(newBlob); }, { orientation: true, canvas: true } ); } }); }, (err) => { console.log(err); if(err == "Unable to retrieve path to picture!") this.presentToast("File must be JPG or PNG format."); }); }

searchByImageFile(imageFile) 메소드 안에서 imageFile.size로 파일의 사이즈를 구할 수 있다. 하지만 camera option에서 quality 값이 default: 50 이기때문에 실제 이미지의 크기가 아닌 cordova camera에서 받아온 (퀄리티가 50)인 이미지의 크기를 받아온다.

searchByImageFile(imageFile) 메소드에서 api의 parameter에 싣어서 보내면 끝~~