Question

我发现这个插件可以让我在我的应用程序中保存图像（我很难找到这些特定主题的解决方案）。我的问题是如何以有角度的方式实现这一点？我仍然是angular.js的新手，这就是为什么我仍然感到困惑的地狱。无论如何，它说

function onDeviceReady(){
    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas')
    ); 
}

和角度离子应用程序中的onDeviceReady在这部分是对的吗？

angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) { 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }  
// THIS IS WHERE I CAN PUT THE ABOVE CODE AM I RIGHT?
  });
})

我已经完成了这个

angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }  
      window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas')
    );
  });
})

我插入的代码将使我能够使用该插件。但我在我的控制台中收到错误：

任何提示或帮助都将受到赞赏，我仍然非常新的angular.js抱歉的noob问题。

Answer 1

看起来您的脚本序列错误，您应该在所有角度文件＆amp;之后加载app.js文件。 Canvas2ImagePlugin javascript代码已加载。

<script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/org.devgeeks.Canvas2ImagePlugin/www/Canvas2ImagePlugin.js"></script>
<script src="js/app.js"></script>

Answer 2

我找到了一个基于此question的解决方案，我在调用html文件中的<script src="js/app.js"></script>之后，在一个单独的脚本中添加了一个事件监听器。

JS

document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
             alert("Got deviceready");
            var canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;
    }


  // where myCanvasId == 'myCanvas' (the id of the canvas above)
        function mySavingFunction(myCanvasId) {
            canvas2ImagePlugin.saveImageDataToLibrary(
                function(msg){
                   alert(msg);// the filename and path where the image is saved
                }, 
                function(err){
                    alert(err);
                }, 
                myCanvasId
            );
        }

HTML

<canvas id="myCanvas" width="165px" height="145px"></canvas>
<button onclick="mySavingFunction(myCanvas)">Save Canvas</button>

如果您要在浏览器中测试它，它不会工作，我不知道为什么，但它只适用于您构建离子项目ionic build android并将其安装在设备中或在设备模拟器（Genymotion或Bluestacks）中。

Ionic App - Canvas2ImagePlugin无法使用Angular.js

2 个答案: