通过 stateprovider 传递 base64 图像

Question

我正在尝试通过 stateParam 发送 base-64 编码图像。似乎当它到达另一条路线时，我尝试填充图像标签它不起作用（显示一个小图像未找到图标）。

但是，如果我只获取字符串并填充测试图像标签而不通过路由发送它，它会完美地工作。

这有效（onSuccess 部分）：

angular.module('app.cameraCtrl', [])

.controller('cameraCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state) {

    $scope.momentPicture = document.getElementById('momentPicture');

    $scope.camera = function() {
        console.log("CAMERA");
        navigator.camera.getPicture(onSuccess, onFail, 
            { quality: 50, //Quality of photo 0-100
            destinationType: Camera.DestinationType.DATA_URL, //File format, recommended FILE_URL
            allowEdit: false,   //Allows editing of picture
            targetWidth: 300,
            targetHeight: 300,
            correctOrientation: true
        });

        function onSuccess(imageURI) {
            var picture = "data:image/jpeg;base64," + imageURI;
            $scope.momentPicture = document.getElementById('momentPicture');
            $scope.momentPicture.src = picture;
            $state.go('textOverlay', {'picture': picture });
        }

        function onFail(message) {
            console.log('Failed because: ' + message);
        }
    };
}])

这不是：

angular.module('app.textOverlayCtrl', [])

.controller('textOverlayCtrl', ['$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {

    (function init() {
        $scope.momentPicture = document.getElementById('momentPicture');
        $scope.momentPicture.src = $stateParams.picture;
    })();

}])

感谢您的宝贵时间。

编辑：

camera.html（有效）

<ion-view title="Camera" id="page4">
  <ion-content padding="true" class="has-header">
    <button id="camera-button8" ng-click="camera()" class="button button-positive  button-block">Camera</button>
    <button id="camera-button9" class="button button-assertive  button-block">Upload</button>
    <img id="momentPicture" ng-src = "test"></img>
  </ion-content>
</ion-view>

textOverlay.html（无效）

  <ion-content padding="true" class="has-header">
    <div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
      <i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
    </div>
    <img id="momentPicture" ng-src="momentPicture"></img>
    <form id="camera-form4" class="list">
      <label class="item item-input" id="camera-input1">
        <span class="input-label">Input</span>
        <input type="text" placeholder="">
      </label>
    </form>
    <button id="camera-button7" class="button button-positive  button-block">Text Overlay</button>
    <div id="camera-button-bar1" class="button-bar">
      <button id="camera-button4" ng-click="camera()" class="button button-positive  button-block">Submit</button>
      <button id="camera-button6" ng-click="back()" class="button button-positive  button-block button-outline">Cancel</button>
    </div>
  </ion-content>
</ion-view>

Answer 1

是的，所以有两种不同的方法可以使用 angular 变量设置 img 的源，看起来您正在尝试同时执行这两种方法，并且它们是相互抵消。

第一种方法是只使用 ng-src，就像在 init() 函数中的文本覆盖控制器中一样：

$scope.momentPicture = $stateParams.picture;

并在您的模板中使用：

<img id="momentPicture" ng-src="{{momentPicture}}"/>

记住 momentPicture 是一个 $scope 变量，因此需要使用 {{ }} 对其进行插值。也没有必要将 base64 字符串设置为 $scope.momentPicture.src 这只会让事情变得更加混乱，只需将其设置为 $scope.momentPicure.

另一种方法如下：

您的文本覆盖控制器应如下所示：

angular.module('app.textOverlayCtrl', [])

.controller('textOverlayCtrl', ['$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {

    (function init() {
        var momentPicture = document.getElementById('momentPicture'); //Doesn't really need to be a $scope variable
        momentPicture.setAttribute('src', $stateParams.picture);
    })();

}])

然后在您的模板中删除 ng-src:

<img id="momentPicture"/>

如果第二种方法不起作用，可能是因为您试图在 DOM 元素加载 document.getElementById.

之前访问它

让我知道这是否有效！ :)

通过 stateprovider 传递 base64 图像

passing a base64 image through stateprovider

base64

routes

angularjs

ionic-framework