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

필요한 플러그인

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

$ npm i blueimp-load-image 

먼저 ActionSheet를 만들어줍니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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(); }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

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에 싣어서 보내면 끝~~