Question

我正在使用带有ngCordova和AngularJS的Phonegap。我正在尝试使用以下插件（PhoneGap-Image-Resizer）来帮助我将一些媒体保存到设备中。我的问题是我的插件给了我以下错误：

[phonegap] [console.error]错误：undefined不是对象（评估＆＃39; $ window.imageResizer.getImageSize＆＃39;）

这只发生在我检查设备上的应用程序时，当我通过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);
        };


    });

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

Answer 1

我看到你从画布上获取数据网址为PNG，但是然后尝试将其存储为jpg？

也许试试这个：

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

而不是：

theCanvas.toDataURL("image/png");

Answer 2

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

Answer 3

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

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

3 个答案: