将图像 src 设置为 file_uri angular ripple

Question

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

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

平台是 ios（不确定切换到 android 是否会差)

当我调用 getpicture 函数和 returns 所选图像的 URI 时，ripple 模拟器向我显示了一个带有文件选择对话框的屏幕。

这是我的问题：我将图像 src 设置为 ImageURI (blob:http%3A//localhost%3A4400/df84a835-ed01-41ea-a58e-bdc171a22e87)，但图像无法显示。我不认为它是数据 binding/resolving 的问题，因为如果我硬编码 url 而不是 imageuri，那么代码会按预期工作。

任何 suggestions/pointers 将不胜感激。

更新 1

首先，非常感谢你们花时间帮助我！！不幸的是，其中 none 似乎有效 :( 顺便说一句，平台是 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 view 并看到我的代码按预期工作（相机打开并且捕获的图像在应用程序上可见。）这让我相信问题出在波纹上而不是代码本身。顺便说一句，如果您还没有，请查看 ion view。它最接近设备上测试，无需实际构建、注册为 ios 开发人员等

感谢和欢呼！！

将图像 src 设置为 file_uri angular ripple

Setting image src to file_uri angular ripple

angularjs

cordova

ionic-framework

ripple