How to display moved pictures from Phonegap/Cordova Camera API under Angularjs

问题

Following my previous post (usage of Cordova camera API) I found a way to move the image captured to a local app folder using the following code, now using Cordova 3.5.0:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {    

    function onCameraFail(message) {
        console.log('Failed because: ' + message);
        $scope.$apply();
    }

    function fileError(message) {
        console.log('Failed because: ' + message);
        $scope.$apply();
    }

    $scope.takePhotoFromCamera = function() {
        navigator.camera.getPicture(onCameraSuccess, onCameraFail, { 
            quality: 50,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            sourceType: 1,      // 0:Photo Library, 1:Camera, 2:Photo Album
            encodingType: 1,     // 0:JPG, 1:PNG
            allowEdit: true,
            correctOrientation: true,
            saveToPhotoAlbum: false,
            targetWidth: 600
        });
        $scope.$apply();
    };   

    function onCameraSuccess(imageURI) {
        window.resolveLocalFileSystemURL(imageURI, gotFileObject, fileError);
    }    

    //-- Move photo file to permanent location (localhost/CORS incompatibility) --
    function fileMoved(file) {
        $scope.$apply(function () {
            $scope.favourite.photo.push("/" + file.name);
        });        
    }

    function gotFileObject(file) {
        steroids.on('ready', function() {
            var targetDirURI = "file://" + steroids.app.absoluteUserFilesPath;
            var fileName = "pic" + $scope.id + "-" + $scope.favourite.photo.length + ".png";
            window.resolveLocalFileSystemURL(targetDirURI, function(directory) {
                file.moveTo(directory, fileName, fileMoved, fileError);
            }, fileError);
            if ($scope.favourite.photo.length == 0) {
                window.location.reload();
            }
        });
    }
}

This code seems to work very randomly. The image file seems to always be properly moved to the local app root folder but the filename storing in $scope.favourite.photo inside the fileMoved function does not seem to happen consistently. I couldn't figure out what goes wrong and why it sometimes (very rarely) works. Any idea would be very appreciated.

来源：https://stackoverflow.com/questions/26371787/how-to-display-moved-pictures-from-phonegap-cordova-camera-api-under-angularjs

标签

angularjs

cordova

steroids