Cordova plugins undefined when tested on device
Question
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_JPG}
);
}, 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.
3 answers
solution1
0 2017-04-21 14:43:56
I see you get the data URL from the canvas as a PNG but then try to store it as a jpg?
Maybe try this:
theCanvas.toDataURL("image/jpeg", 1);
Instead of this:
theCanvas.toDataURL("image/png");
solution2
0 2017-04-21 19:27:40
I studied about the plugin in the Git-hub. There in the Android quirks and howto's section, it is mentioned that the The storeImage funtion will always store the image to the device's default external storage, under the given Directory and filename. the photoAlbum property will be ignored. If this is the case, I think you need to have the external memory card in your mobile device.
solution3
0 ACCPTED 2017-04-26 13:50:06
This was a very tricky one to get my head around but we have finally got an answer. Phonegap uses Hydration, which is a way to update your application without having to reinstall it each time. Turns out there is a bug with Hydration in Phonegap 6.5.0 that means the cordova.js file is not loading properly. To solution to this is to Turn off Hydration. Once i turned that off, the plugins started to load on the device.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.