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

我试图在不访问手机内存的情况下在相同页面上显示通过相机拍摄的图像。有点像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>

来源

2016-11-08 kk19

嗨** kk19 **，根据文档http://ngcordova.com/docs/plugins/camera/，您的代码看起来不错。你能告诉我你显示图像的错误吗？谢谢 – Hiro

没有错误。相机工作正常，图像被存储，但我需要显示它在我的页面上，我们有相机选项的相同页面上。没有访问我的手机库 – kk19

我已经添加app.js代码上面检查它。相机工作正常捕捉图像，但我需要显示它在我们有相机选项的同一页面上。 – kk19

，你需要在你的HTML绑定像在图像上这样$scope.image.src="data:image/jpeg;base64," + imageData;

范围申报image.src然后这<img ng-src="image.src"/>

来源

2016-11-08 12:42:30 iCediCe

我已经添加了html代码并按照您的指示进行了尝试，但它显示的是破碎的图像，而不是自动采用网址。而且，我只能点击相机一次就意味着如果我不得不再次使用相机，我必须关闭应用程序并重新打开它 – kk19

你需要使用ng-src而不是src对你的图像... – iCediCe

是的我有使用，现在但仍然没有帮助 – kk19

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

回答

相关问题