3

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

[phonegap] [console.error] 错误：未定义不是对象（正在评估'$window.imageResizer.getImageSize'）

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

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

索引.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);
        };


    });

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

4

3 回答 3

0

我看到您从画布中获取数据 URL 作为 PNG，然后尝试将其存储为 jpg？

也许试试这个：

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

而不是这个：

theCanvas.toDataURL("image/png");
于 2017-04-21T14:43:56.993 回答
0

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

于 2017-04-26T13:50:06.320 回答
0

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

于 2017-04-21T19:27:40.457 回答