Question

首先，我是Angular / ionic的新手。我正在尝试学习如何使用插件使用本机功能，相机插件是特定的。

我目前正在测试ripple模拟器上的代码（我还是一个新手，远离实际设备测试）

平台是ios（不确定切换到android是否会产生一个差）

当我调用getpicture函数并返回所选图像的URI时，纹波仿真器会显示一个带有文件选择对话框的屏幕。

这是我的问题：我将image src设置为ImageURI（blob：http％3A // localhost％3A4400 / df84a835-ed01-41ea-a58e-bdc171a22e87），但图像无法显示。我不认为它是数据绑定/解析的问题，因为如果我硬编码url而不是imageuri，那么代码按预期工作。

任何建议/指示都将不胜感激。

更新1

首先，非常感谢你们花时间帮助我！不幸的是，这些似乎都不起作用:(顺便说一句，平台是cordova，而不是ios。抱歉这个错误。有趣的是，如果我在浏览器中打开blob url，那么我就能看到图像了。但不是在模拟器中。以下是屏幕截图，如果这会有所帮助：link link再次感谢!!

HTML：

          <img ng-hide="ImagePreview == null"  ng-src="{{ImagePreview}}">

控制器：

           $scope.GetImageCamera = function() {
           var CameraOptions = {
            quality : 75,
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 100,
            targetHeight: 100,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: true
        };

        $cordovaCamera.getPicture(CameraOptions).then(function(imageURI) {
            $scope.ImagePreview = imageURI;
            $scope.$apply();
        }, function(err) {
           alert("Error!");
        });
    };

Answer 1

试试这个：

$cordovaCamera.getPicture(CameraOptions).then(function(imageData) {
           $scope.ImagePreview = "data:image/jpeg;base64," + imageData;
            }, 
             function(err) {
                // An error occured. Show a message to the user
            });

而不是imageURI调用imageData。

Answer 2

试试这个，应该是正确的方法。在iOS中，您必须更改要操作的图像路径的URL。

$cordovaCamera.getPicture(onSuccess, onFail, { quality: 50,
   destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
   var image = document.getElementById('myImage');
   image.src = imageURI;
}

function onFail(message) {
   alert('Failed because: ' + message);
}

iOS：

$scope.imagen.substr($scope.imagen.lastIndexOf('/') + 1);

Answer 3

最后，我使用了Ion视图并看到我的代码按预期工作（相机打开并且应用程序上可以看到捕获的图像。）这让我相信问题是涟漪而不是代码本身。顺便说一句，如果你没有，请查看离子视图。它最接近设备上的测试而不必实际构建，注册为ios开发人员等。

谢谢，欢呼!!

将图像src设置为file_uri角度纹波

3 个答案: