CODEWITHSUNDEEP
htmlangularjsionic-framework
Praveen K
Praveen K

Reputation: 51

How To Access ngCordova Camera Image From Inside JavaScript

I am currently developing a photo-editing app with the Ionic Framework. At the moment, I have used an open-source JS Drag & Drop photo editor and have modified accordingly but I need to be able to access the image that the user creates with the ngCordova Camera plugin outside of the AngularJS and in a separate script with only JS.

I've decided to take on the ( angular.element(document.getElementById('editor')).scope(). ) approach but have come to no avail.

I'm starting to think that isn't going to be possible but that's why I came here to give it a final shot.

Here's some code from the editor. Yoda is the background image which works when set to a locally stored image.

        window.onload = function() {
       //THIS IS WHERE WE WILL ACCESS THE IMAGE GENERATED BY ngCamera

        var sources = {
            yoda: angular.element(document.getElementById('editor')).scope().pictureUrl
        };
        loadImages(sources, initStage);

    };

Below is where we take the picture and assign its url to $scope.pictureUrl. Ignore the adding to array part, that is for syncing the images to Firebase.

 $cordovaCamera.getPicture(options)
        .then(function(imageData) {
            syncArray.$add({image: imageData});
            $scope.pictureUrl= 'data:image/jpeg:base64,' + data
            .then(function() {
                alert("Image has been uploaded");
            });
        }, function(error) {
            console.error(error);
        });
  };

Pastebin for the whole app.js file: http://pastebin.com/8A8C4hL3

In brief, I am looking for a way to access an image created by ngCordova's Camera plugin inside of some actual JS and outside of the AngularJS used by the Ionic Framework.

Upvotes: 0

Views: 76

Answers (1)

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

If its just you want your image in an external js file, then you can try to store the image in localStorage like

$cordovaCamera.getPicture(options).then(function(imageData) {
          localStorage.setItem('myBase64Image', ("data:image/jpeg;base64," + imageData));

        }, function(err) {
          console.log('error in camera then');
          // error
        });

Then in your external js file You can access your base64 image like.

localStorage.getItem('myBase64Image')

Hope this helps.

Upvotes: 1

Related Questions