Hi,
I cannot get anything to happen after opening the photo gallery. The gallery opens (finally), but I cannot trigger anything afterwards – cannot make a feedback message appear or show the image. Here’s my code:
Installation (pretty sure I have extra files in here and that ionic-native isn’t doing anything)
npm install ionic
npm install @vue/cli -g
npm install vue-router -g
npm install @ionic/vue -g
npm install @ionic/core -g
npm install cordova-cli -g
npm install ionic-webpack -g
npm install ionic-native -g
npm install @ionic-native/core -g
npm install ionicons@4.5.9-1 -g
vue create yourProjectName
cd yourProjectName
npm install ionic cordova
npm run build
ionic cordova platform add ios
ionic cordova platform add android
npm install @ionic-native/core
npm install @ionic/pwa-elements
ionic integrations enable cordova
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file
npm install @ionic-native/camera
ionic cordova plugin add cordova-plugin-camera
vue add cordova
ionic serve --devapp
Main.js
import Vue from 'vue';
import Axios from 'axios';
import App from './App.vue';
import router from './router';
import IonicVue from '@ionic/vue';
Vue.use(IonicVue);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render : (h) => h(App)
})
Camera.vue
<template>
<div>
<p>feedback: {{feedback}}</p>
<hr>
<!-- <img :src="imagepath ? imagepath : null" /> -->
<ion-button @click="getPicture()">get Picture Now</ion-button>
</div>
</template>
<script>
export default {
name: "camera",
data() {
return {
imagepath: null,
feedback: 'nothing',
};
},
//do I need this?
mounted() {
document.addEventListener("deviceready", () => {
this.feedback = "device is ready";
});
},
methods: {
//open photo gallery
getPicture() {
navigator.camera.getPicture(onSuccess, onFail,{ quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
}).then((imageData) => {
this.feedback = "success";
//this.currentImage = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
this.feedback = "fudge: " + err;
});
function onSuccess(imageData) {
this.feedback = "success";
//this.imagepath = imageData.dataUrl;
}
function onFail(message) {
this.feedback = "fudge";
}
}
},
};
</script>