Plugins Cordova 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 on my device. My problem is that my plugin is giving me the following error:
[phonegap] [console.error] Error: undefined is not an object (estimate "$ window.imageResizer.getImageSize")
This only happens when I test the app on my device, when I run it locally via localhost: 3000 I don't get the error. I get similar results when I start the console log after calling DeviceReady. In the browser this is fine, where on the device it is undefined.
After a lot of research, I saw several checks referenced by the cordova.js file in my index.html, which, as you can see below, is this:
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_JPG}
);
}, false);
};
});
If anyone can help me, please understand why when I am on my device the plugins are undefined when they work fine in the browser I will be very grateful.
source to share
It was a very difficult task, but I finally got the answer. Phonegap uses Hydration, which allows you to update your app without having to reinstall it every time. It turns out there is a bug with Hydration in Phonegap 6.5.0 which means the cordova.js file is not loading properly. To solve this problem, you must turn off hydration. As soon as I disabled this, plugins started loading onto the device.
source to share
I have looked into the plugin at Git-hub. The Android Quirks section and the Howto section mentions that the storeImage function always saves the image to the external device storage by default according to the given directory and file name. the photoAlbum property will be ignored. If so, I think you need to have an external memory stick on your mobile device.
source to share