ionic3 實現拍照與從相簿選擇功能
阿新 • • 發佈:2018-11-11
參考了很多網上的資料,但是每個人遇到的問題都不一樣,我這裡出現的問題,可能是node版本,還有外掛版本之類的問題,問題以及解決方式可以看這個圖。
一、外掛依賴引入
(1)配置相機
在控制行輸入命令:
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
在app.module.ts問價中配置資訊
import {Camera,CameraOptions} from '@ionic-native/camera';
然後註冊依賴即可
providers: [ Camera ]
(2)儲存資料到指定相簿中
$ ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos"
$ npm install --save @ionic-native/photo-library
(3)從相簿中獲取
$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message" $ npm install --save @ionic-native/image-picker
import {ImagePicker, ImagePickerOptions} from "@ionic-native/image-picker";
二、元件使用
在需要用到的檔案中這樣使用呼叫外掛
responseActionEvent() { let actionSheet = this.actionSheetCtrl.create({ buttons: [{ text: '拍照', role: 'takePhoto', handler: () => { this.takePhoto(); } }, { text: '從相簿選擇', role: 'chooseFromAlbum', handler: () => { this.chooseFromAlbum(); } }, { text: '取消', role: 'cancel', handler: () => { console.log("cancel"); } }] }); actionSheet.present().then(value => { return value; }); } // 照相 takePhoto() { const options: CameraOptions = { //圖片質量,越高質量越好(0~100) quality: 100, //允許編輯 allowEdit: true, targetWidth: 200, targetHeight: 200, //是否允許儲存到相簿 saveToPhotoAlbum: true, //圖片路徑 destinationType:this.camera.DestinationType.FILE_URI, //媒體型別,圖片、視訊等 mediaType:this.camera.MediaType.PICTURE, }; this.camera.getPicture(options).then(imageURI => { let base64Image = 'data:image/jpeg;base64,' + imageURI; alert(base64Image); console.log('Image URI: ' + imageURI); this.avatar = imageURI.slice(7); }, error => { console.log('Error: ' + error); alert("版本不相容,從相簿選擇!"); }); } // 從相簿中選擇 chooseFromAlbum() { const options: ImagePickerOptions = { maximumImagesCount: 1, width: 200, height: 200 }; this.imagePicker.getPictures(options).then(images => { if (images.length > 1) { this.presentAlert(); } else if (images.length === 1) { console.log('Image URI: ' + images[0]); this.avatar = images[0].slice(7); } }, error => { console.log('Error: ' + error); }); } presentAlert() { let alert = this.alertCtrl.create({title: "上傳失敗", message: "只能選擇一張圖片作為頭像哦", buttons: ["確定"]}); alert.present().then(value => { return value; }); } //儲存照片 saveImage() { const actionSheet = this.actionSheetCtrl.create({ title: '提示', buttons: [ { text: '儲存本地', handler: () => { //1、請求使用者授權 this.photoLibrary.requestAuthorization().then(() => { //2、授權成功 this.photoLibrary.getLibrary().subscribe( { next: library => { library.forEach(function (libraryItem) { }); //3、儲存圖片 this.photoLibrary.saveImage(ImageUrl圖片的url, '相簿名字').then(() => { alert('儲存成功') }) }, error: err => { alert('儲存失敗!') }, complete: () => { console.log('沒有獲取圖片資訊'); } }); }) .catch(err => alert('獲取失敗!')); } }, { text: '取消', role: 'cancel' } ] }) actionSheet.present(); }
如有不懂,推薦查閱文章:https://segmentfault.com/a/1190000011099097