5 Replies Latest reply on Apr 27, 2017 1:23 AM by leeg50002217

    Plugins undefined when tested on device

    leeg50002217

      I am using Phonegap with ngCordova and AngularJS. I am trying to use the following plugin (PhoneGap-Image-Resizer) to help me save some media to the device. My issue is that my plugin is giving me the following error:

      [phonegap] [console.error] Error: undefined is not an object (evaluating '$window.imageResizer.getImageSize')

      This only happens when i check the app on my device, when I run it locally through localhost:3000 I do not get the error. I get similar results when running a console log after the DeviceReady call. In the browser it is fine, where on the device it is undefined.

      After a lot of research I have seen a few check the cordova.js file is being referenced in my index.html, which as you can see below it is:

      index.html

      <!DOCTYPE html>
      <html>

      <head>
        
      <meta charset="utf-8" />
        
      <meta name="format-detection" content="telephone=no" />
        
      <meta name="msapplication-tap-highlight" content="no" />
        
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        
      <link rel="stylesheet" type="text/css" href="css/app.css" />
      </head>

      <body class="app-container">
        
      <div class="app">
        
      <div ng-app="MyApp" class="ui-view-container">
        
      <ui-view class="main-view">
        
      <img src="/img/logo.png" alt="my App" class="loading-logo"/>
        
      </ui-view>
        
      </div>
        
      </div>

        
      <script type="text/javascript" src="js/angular.min.js"></script>
        
      <script type="text/javascript" src="js/angular-route.js"></script>
        
      <script type="text/javascript" src="js/angular-touch.js"></script>
        
      <script type="text/javascript" src="js/angular-animate.min.js"></script>
        
      <script type="text/javascript" src="js/angular-ui-router.min.js"></script>
        
      <script type="text/javascript" src="js/angular-foundation.js"></script>
        
      <script type="text/javascript" src="js/angular-modules/app.js"></script>
        
      <script type="text/javascript" src="js/angular-modules/controllers/main.js"></script>
        
      <script type="text/javascript" src="js/ng-cordova.js"></script>
        
      <script type="text/javascript" src="cordova.js"></script>
        
      <script type="text/javascript" src="js/index.js"></script>
        
      <script type="text/javascript">
        app
      .initialize();
        
      </script>
      </body>

      </html>

       

       

      Here is my partial

      <div class="row collapse expanded text-center camera">
        
      <div class="row">
             
      <div class="small-12 columns end">
                  
      <canvas id="canvas" height="250" width="375"></canvas>
             
      </div>
        
      </div>
        
      <div class="row">
             
      <div class="small-12 columns">
                  
      <h2>Image of canvas</h2>
                  
      <img id="CanvasImage" alt="text" />
             
      </div>
        
      </div>

        
      <div class="row">
             
      <div class="small-6 columns">
                  
      <a class="button expanded" ng-click="camera()">Camera</a>
             
      </div>
             
      <div class="small-6 columns">
                  
      <a class="button expanded" ng-click="savecanvas()">savecanvas</a>
             
      </div>
        
      </div>
      </div>

       

      Here is my controller

      angular.module('MyApp')

           .controller('CameraCtrl', function($scope, $cordovaCamera, $rootScope, $location, $window, starFactory) {

             $scope
      .savecanvas = function() {
                   document
      .addEventListener("deviceready", function() {
                  
      var theCanvas = document.getElementById('canvas');
                  
      var CanvasImage = document.getElementById('CanvasImage');
                  
      CanvasImage.src = theCanvas.toDataURL("image/png");

                  $window
      .imageResizer.storeImage(
                       
      function(data) { console.log('It worked!');},
                       
      function (error) {console.log("Error : \r\n" + error);},
                        theCanvas
      .toDataURL("image/png"),
                       
      {imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,format: ImageResizer.FORMAT_PNG}
                  
      );
             
      }, false);
        
      };
      });

       

       

      If anyone could please help me, understand why when i am on my device the plugins are undefined, when they work fine on the browser I will be very thankful