I am currently utilizing Phonegap in conjunction with ngCordova and AngularJS. The aim is to leverage the capabilities of the plugin (PhoneGap-Image-Resizer) to facilitate media saving on the device. However, I encountered an issue where the plugin throws the following error:
[phonegap] [console.error] Error: undefined is not an object (evaluating '$window.imageResizer.getImageSize')
This problem only surfaces when testing the application on the device itself; no error occurs when running it locally via localhost:3000. Similar issues arise when performing a console log post DeviceReady call—on the browser everything functions normally, whereas on the device it returns as undefined.
Following extensive research, some sources suggest checking whether the cordova.js file is properly referenced in my index.html file, which indeed seems to be done correctly:
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>
Below is an excerpt from 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 the specifics within 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 has insight on why the plugins return as undefined while operating on the device as opposed to functioning correctly on the browser, any assistance or guidance would be greatly appreciated.