Question

我正在尝试在同一页面上显示通过相机拍摄的图像而不访问手机的内存。有点像watsapp，我们点击并立即上传的方式。所以，就像我们捕获一些东西并在同一页面上自动显示它，我们有捕获按钮。

 .controller('CameraCtrl', function($scope, $cordovaCamera) {

  document.addEventListener("deviceready", function () {

    var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false,
      correctOrientation:true
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
       }, function(err) {
      // error
    });

   }, false);

})

app.js

 .state('tab.detail', {
  url: '/new-order/id',
  views: {
    'tab-new': {
      templateUrl: 'templates/detail.html',
      controller: 'DetailCtrl'
    }
  }
})

.state ('camera',{
  url:'/camera',
  templateUrl: 'templates/detail.html',
  controller:'CameraCtrl'
})

HTML

       <ion-content>
         <div>
           <div class="col text-right">
             <p>
               <a href="#/camera" class="camera-icon" ><i class="icon ion-camera"></i></a>
             </p>
           </div>
      <p>
        <img ng-src="image.src" />
      <p>
   </div>
 </ion-content>

Answer 1

你需要在范围内声明image.src，如$scope.image.src="data:image/jpeg;base64," + imageData;

然后在你的html中绑定像<img ng-src="image.src"/>

这样的图像

离子显示用相机在同一页面拍摄的照片

1 个答案: