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

    Plugins undefined when tested on device


      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:


      <!DOCTYPE html>

      <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" />

      <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"/>

      <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">




      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 class="row">
      <div class="small-12 columns">
      <h2>Image of canvas</h2>
      <img id="CanvasImage" alt="text" />

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


      Here is my controller


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

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

      function(data) { console.log('It worked!');},
      function (error) {console.log("Error : \r\n" + error);},
      {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