在相同頁面上用相機拍攝的離子顯示照片

我試圖在不訪問手機內存的情況下在相同頁面上顯示通過相機拍攝的圖像。有點像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

在相同頁面上用相機拍攝的離子顯示照片

回答

相關問題