[英]Cordova plugins undefined when tested on device
我正在使用带有ngCordova和AngularJS的Phonegap。 我正在尝试使用以下插件( PhoneGap-Image-Resizer )来帮助我将一些媒体保存到设备中。 我的问题是我的插件给了我以下错误:
[phonegap] [console.error]错误:undefined不是对象(评估'$ window.imageResizer.getImageSize')
这只发生在我检查设备上的应用程序时,当我通过localhost在本地运行时:3000我没有收到错误。 在DeviceReady调用后运行控制台日志时,我得到类似的结果。 在浏览器中它很好,在设备上它是未定义的。
经过大量研究后,我看到一些检查我的index.html中引用了cordova.js文件,正如您在下面看到的那样:
的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>
这是我的偏爱
<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>
这是我的控制器
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);
};
});
如果有人可以帮助我,请理解为什么当我在我的设备上时,插件是未定义的,当它们在浏览器上正常工作时我会非常感激。
我看到你从画布上获取数据URL作为PNG但是然后尝试将其存储为jpg?
也许试试这个:
theCanvas.toDataURL("image/jpeg", 1);
而不是这个:
theCanvas.toDataURL("image/png");
我研究了Git-hub中的插件。 在Android怪癖和howto的部分中,提到了storeImage功能将始终将图像存储在设备的默认外部存储器中,在给定的目录和文件名下。 photoAlbum属性将被忽略。 如果是这种情况,我认为您需要在移动设备中安装外部存储卡。
这是一个非常棘手的问题,但我们终于得到了答案。 Phonegap使用Hydration,这是一种更新应用程序的方法,无需每次都重新安装。 原来在Phonegap 6.5.0中有一个Hydration的错误,这意味着cordova.js文件没有正确加载。 要解决此问题,请关闭水合作用。 一旦我关闭它,插件开始加载在设备上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.