동일한 페이지에 카메라로 찍은 사진 표시 이모티콘

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 바인드 이미지에 그런 다음이 $scope.image.src="data:image/jpeg;base64," + imageData;

같은 범위에 image.src를 선언 할 필요가

 <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

HTML 이 <img ng-src="image.src"/>