离子相机问题答案

【问题标题】：Ionic Camera Issue离子相机问题
【发布时间】：2016-07-22 03:13:42
【问题描述】：

我正在构建一个带有相机插件的 Ionic 应用程序。我需要解决的问题如下：

执行 Ionic 应用程序
通过cordova-plugin-camera打开相机
拍照并用FILE_URI检索数据，但是在第3步中，当我接收到带有URI的数据时，文件路径是这样的：
```
file:///sdcard/emulated/0/..../142312321.jpg
```
所以我将这个 uri 保存到 $scope.photo_uri 并将 <img/> 标签设置为
```
<img src="{{photo_uri}} />
```

但没有显示照片。我该如何解决这个问题？

代码如下：

$scope.onTakePhoto = function() {

    if (typeof navigator.camera == 'undefined'){
        alert("We'r sorry! Please try again on your Phone.^_^");
        return;
    }

    var options = {
        quality : 75,
        destinationType : Camera.DestinationType.NATIVE_URI,
        sourceType : Camera.PictureSourceType.CAMERA,
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 300,
        targetHeight: 300,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function (imageUri) {
        //try{
        var id = 'P_' + (new Date()).Format('MM_dd') + '_' + ($scope.photoList.length + 1);
        //var data = "data:image/jpeg;base64," + imageData;
        var date = (new Date()).Format('yyyy-MM-dd hh:mm P');
        var name = 'PM_IMG_' + (new Date()).Format('yyyyMMddhhmmss') + '.jpg';
        var location = gMyLocation.getData();
        var uri = $scope.folder.uri;

        window.resolveLocalFileSystemURL(imageUri, function(fileEntry) {

            //If this doesn't work
            $scope.camera_image_data.image = fileEntry.nativeURL;

            console.log($scope.camera_image_data.image);
            //Try this
            //var image = document.getElementById('myImage');
            //image.src = fileEntry.nativeURL;
        });

        //$scope.camera_image_data.image = 'cdv' + imageUri;
        //alert('DataURI : '+ imageUri);

        //createPhotoFile($scope.folder.uri, name, data, true);
        //movePhotoFile(imageUri, uri, name);

        var sPhoto = new PhotoObj(id,name,date,location,uri);
        $scope.photoList.push(sPhoto);
        //alert("PATH : " + $scope.photoList[0].uri +'\n'+
        //'NAME : ' + $scope.photoList[0].name);

    }, function (err) {
        // error
        console.log(err);
    });
};

【问题讨论】：

标签： cordova camera ionic-framework cordova-plugins

【解决方案1】：

将文件（从相机捕获）移动到cordova.file.externalRootDirectory 并获取并保存文件（移动）路径。这是movePhotoFile() 函数。

function movePhotoFile(oriPathStr, distPath, name) {
        var oriName = oriPathStr.substr(oriPathStr.lastIndexOf('/') + 1);
        var oriPath = oriPathStr.substr(0, oriPathStr.lastIndexOf('/') + 1);

        alert(oriPath);

        $cordovaFile.moveFile(oriPath, oriName, distPath, name)
            .then(function (success) {
                // success
                console.log("Correctly Moved your File!!!");
                // here is your code 

            }, function (error) {
                // error
                console.log("Failed Move Image!! 0.0")
            });
    }

请ionic run android或构建您的应用并使用 APK 进行测试。

【讨论】：