在设备上测试时未定义 Cordova 插件

Question

我正在将 Phonegap 与 ngCordova 和 AngularJS 结合使用。我正在尝试使用以下插件 (PhoneGap-Image-Resizer) 来帮助我将一些媒体保存到设备中。我的问题是我的插件出现以下错误：

[phonegap] [console.error] 错误：undefined 不是一个对象（评估'$window.imageResizer.getImageSize'）

只有在我检查设备上的应用程序时才会发生这种情况，当我通过 localhost:3000 在本地运行它时，我没有收到错误。在 DeviceReady 调用后运行显示控制台日志时，我得到了类似的结果。在浏览器中它很好，在设备上它是未定义的。

经过大量研究后，我看到一些检查 cordova.js 文件在我的 index.html 中被引用，如下所示：

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);
        };


    });

如果有人能帮助我，请理解为什么当我在我的设备上时插件未定义，当它们在浏览器上正常工作时我将非常感激。

Answer 1

我看到您从 canvas 中以 PNG 格式获取数据 URL，然后尝试将其存储为 jpg？

也许试试这个：

theCanvas.toDataURL("image/jpeg", 1);

而不是这个：

theCanvas.toDataURL("image/png");

Answer 2

我在 Git-hub 研究了这个插件。在 Android 怪癖和操作方法部分，提到 storeImage 函数将始终将图像存储到设备的默认外部存储中，在给定的目录和文件名下。 photoAlbum 属性将被忽略。 如果是这种情况，我认为您的移动设备中需要有外部存储卡。

Answer 3

这是一个非常棘手的问题，但我们终于得到了答案。 Phonegap 使用 Hydration，这是一种无需每次都重新安装即可更新应用程序的方法。事实证明，Phonegap 6.5.0 中的 Hydration 存在一个错误，这意味着 cordova.js 文件未正确加载。解决这个问题的方法是关闭水合作用。一旦我关闭它，插件就会开始加载到设备上。

在设备上测试时未定义 Cordova 插件

Cordova plugins undefined when tested on device

javascript

phonegap-plugins

angularjs

cordova

phonegap