Ionic App - Canvas2ImagePlugin kann nicht funktionieren mit Angular.js

Question

Ich fand dieses Plugin, mit dem ich Bilder in meiner App speichern kann (ich habe eine harte Zeit, eine Lösung in diesem speziellen Thema zu finden). Meine Frage ist, wie kann ich das winkelförmig umsetzen? Ich bin immer noch neu bei angular.js, deshalb bin ich immer noch verwirrt wie die Hölle. Wie auch immer, es heißt

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

und die onDeviceReady in eckigen ionischen App ist in diesem Teil richtig?

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

Ich habe dies getan

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

Wo ich den Code eingefügt, die es mir ermöglichen wird das Plugin zu verwenden. Aber ich bin immer einen Fehler in meiner Konsole:

jeden Tipp oder Hilfe zu erkennen ist, wieder bin ich immer noch sehr neu für die Noob Frage leider Angularjs.

Answer 1

ich eine Lösung aus diesem question Basis gefunden habe, habe ich einen Ereignis-Listener in einem seperaten Skript nach der <script src="js/app.js"></script> in meine HTML-Datei aufgerufen wird.

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> 

Es wird nicht funktionieren, wenn Sie es im Browser testen, ich weiß nicht warum, aber es funktioniert nur, wenn Sie Ihre ionischen bauen Projekt ionic build android und installieren Sie es in einem Gerät oder in einem Gerätemulator (Genymotion oder Bluestacks).

Answer 2

Es scheint, wie Sie falsch Scriptsequenz hatten, Sie app.js Datei nach allen Winkeln Dateien & Canvas2ImagePlugin JavaScript-Code geladen wird, geladen werden sollen.

<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>