Question

我拍了一张照片，我在base64中转换了这个：

我在64号照片中的照片：

data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgK......

我希望以离子视图显示：

我的event.html

<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">

但我一无所获：

我的控制员：

.controller("ExampleController", function ($scope, $cordovaCamera) {

                $scope.takePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };

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

Answer 1

假设从某个地方调用takePhoto函数：

问题可能是，您绑定到原始字符串。请尝试：

.controller("ExampleController", function ($scope, $cordovaCamera) {

$scope.my = {imgURI: null};

                $scope.takePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                  };

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

顺便提一下：请考虑将takePhoto功能放在工厂或服务中。您可以将捕获的图像分配给服务的属性，并直接绑定到范围内。

Answer 2

我整理了一个能够完成你想要做的事情的掠夺者。

http://plnkr.co/edit/XmyLCpwJTodBrMrW2QHZ

您应该考虑的一件事是检查npm验证器库。 https://www.npmjs.com/package/validator 这将允许您验证您的imageData实际上是base64示例，返回true / false。

validator.isBase64(base64Code);

如何在离子视图中显示图像库64？

2 个答案: