javascript - 如何正确使用 Cordova Camera 的 AngularJS Promise？

Question

我有一系列需要以同步顺序执行的函数。其中一个功能是使用 Cordova 相机库从用户的手机获取图片。另一个函数获取图像源并将其绘制在 DOM 中。

我使用 Angular Promise 和 $q 库来处理同步执行。然而，似乎它以某种方式导致在按顺序执行函数时不更新 DOM，即使图像已成功捕获并且我有 url (ImageData)。

为了测试，我添加了一个函数，该函数使用从手机捕获图像时保存的 url 在 DOM 上绘制图像。这确实有效。所以我的 Angular Promise 的使用和处理肯定有问题。

我该如何解决这个问题？

Controller (注入(inject) $q)

var sGetImage = function() {

    var imageSrcOutput = "";
    $scope.imageDataSrc = null;

    try {

        imageSrcOutput = CloakService.getImageData()
            .then(function(imageData) {

                //$scope.imageData = imageData;
                $scope.imageDataSrc = "data:image/jpeg;base64," + imageData;
                //$scope.imgURI = $scope.imageDataSrc;

                return "data:image/jpeg;base64," + imageData;

            });

        // catch any errors with a struddle image
    } catch (error) {

        window.alert("No Image Picked. Drawing Struddle");
        imageSrcOutput = "img/struddle.jpg";
        $scope.imageDataSrc = imageSrcOutput;
    }

    return imageSrcOutput;

}

var sDrawImage = function(imageSrc) {

    var deferred = $q.defer();
    deferred.resolve(imageSrc)

    window.alert("drawing image now with: " + imageSrc)
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = imageSrc;
    img.onload = ctx.drawImage(img, 0, 0);

    return deferred.promise;

}

//执行周期(在 Controller 中)

  sInit() // works fine
  .then( sGetImage ) // image loaded in imageSrcOutput and $scope.imageDataSrc succesfully
  .then( sDrawImage ) // here is the problem, it does not draw the images (tried both imageSrcOutput and $scope.imageDataSrc)
  .then( sAddBanner )
  .catch(function(error) {
      window.alert("Catch Error: " + error)
  })

服务(注入(inject)$cordovaCamera)

var getImageData = function() {

    var deferred = $q.defer();
    var options = getOptions('CAMERA');

    var imageDataOutput = $cordovaCamera.getPicture(options).then(function(imageData) {

        // window.alert(imageData)
        deferred.resolve(imageData)
        return imageData; //todo:check

    }, function(error) {

        deferred.reject(error)
        window.alert(error)

    });

    function getOptions(source) {
        var options = {
            quality: 75,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: true
        };
        return options;
    }

    return deferred.promise;
    //return imageDataOutput;
}

app.js

'use strict';
angular.module('myApp', [
    'ionic',
    'myApp.config',
    'myApp.controllers',
    'myApp.decorators',
    'myApp.directives',
    'myApp.filters',
    'myApp.routes',
    'myApp.services', 
    'angular-loading-bar',
    'ngCordova' // the library to handle the picture
  ])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Answer 1

这是问题吗:

img.onload=ctx.drawImage(img, 0, 0);

onload 处理程序必须是一个函数。您正在立即执行 ctx.drawImage()。

试试这个:

img.onload = function () { ctx.drawImage(img, 0, 0); };

仅供引用，您在 sDrawImage (和其他地方)中使用 $q.defer() 所做的事情是不必要的。如果您想将 imageSrc 传递到下一步，您可以这样做:

var sDrawImage = function(imageSrc) {
    window.alert("drawing image now with: " + imageSrc)
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = imageSrc;

    return $q(function (resolve) {
        img.onload = function () { 
            ctx.drawImage(img, 0, 0); 
            resolve(imageSrc);
        };
    });
};

每当您想到使用$q.defer()时，您都应该问自己“我真的需要这个吗？”。 99.5% 的情况下，答案应该是“否”。