Ionic Vue Camera

@trinzia wrote:

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>

Posts: 1

Participants: 1

Read full topic