İyonik ve Cordova'yı kullanarak görüntüyü aygıt galerisinden nasıl yükleyebilirim?

Cordova kullanan ve aygıtın albümünden resim yüklemek isteyen bir İyonik uygulamasına sahibim. Benim sorunum, Cordova'nın web sitesindeki talimatları takip etmeme rağmen çalışmadığıdır. Bunu başarmak için cordova-plugin-camera kullanıyorumİyonik ve Cordova'yı kullanarak görüntüyü aygıt galerisinden nasıl yükleyebilirim?

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title>Ionic App</title> 
     <link href="ionic/css/ionic.css" rel="stylesheet"> 
     <link href="css/slider-style.css" rel="stylesheet" type="text/css"/> 
     <link href="css/main-app.css" rel="stylesheet" type="text/css"/> 

     <script src="ionic/js/angular/angular.js" type="text/javascript"></script> 
     <script src="ionic/js/angular/angular-animate.js" type="text/javascript"></script> 
     <script src="ionic/js/ionic.bundle.js"></script> 
     <script src="ionic/js/app.js"></script> 
     <script src="js/myapp.js" type="text/javascript"></script> 
     <script src="js/LoadFromDevice.js" type="text/javascript"></script> 

    </head> 

    <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="PopupCtrl"> 

    <ion-nav-bar class="nav-title-slide-ios7 bar-light transparent-nav" style="background: none; border-bottom: none"> 
     <!--  <ion-nav-back-button class="button-icon ion-chevron-left"> 
       </ion-nav-back-button>--> 

    </ion-nav-bar> 

    <ion-nav-view> 

    </ion-nav-view> 

</body> 
</html>

loadImage.html

<button onclick="capturePhoto();">Capture Photo</button> <br> 
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> 
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> 
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> 
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
<img style="display:none;" id="largeImage" src="" /> 
<script> 


    var pictureSource; // picture source 
    var destinationType; // sets the format of returned value 

    // Wait for device API libraries to load 
    // 
    document.addEventListener("deviceready",onDeviceReady,false); 

    // device APIs are available 
    // 
    function onDeviceReady() { 
     pictureSource=navigator.camera.PictureSourceType; 
     destinationType=navigator.camera.DestinationType; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoDataSuccess(imageData) { 
     // Uncomment to view the base64-encoded image data 
     // console.log(imageData); 

     // Get image handle 
     // 
     var smallImage = document.getElementById('smallImage'); 

     // Unhide image elements 
     // 
     smallImage.style.display = 'block'; 

     // Show the captured photo 
     // The in-line CSS rules are used to resize the image 
     // 
     smallImage.src = "data:image/jpeg;base64," + imageData; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoURISuccess(imageURI) { 
     // Uncomment to view the image file URI 
     // console.log(imageURI); 

     // Get image handle 
     // 
     var largeImage = document.getElementById('largeImage'); 

     // Unhide image elements 
     // 
     largeImage.style.display = 'block'; 

     // Show the captured photo 
     // The in-line CSS rules are used to resize the image 
     // 
     largeImage.src = imageURI; 
    } 

    // A button will call this function 
    // 
    function capturePhoto() { 
     // Take picture using device camera and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, 
     destinationType: destinationType.DATA_URL }); 
    } 

    // A button will call this function 
    // 
    function capturePhotoEdit() { 
     // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, 
     destinationType: destinationType.DATA_URL }); 
    } 

    // A button will call this function 
    // 
    function getPhoto(source) { 
     // Retrieve image file location from specified source 
     navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
     destinationType: destinationType.FILE_URI, 
     sourceType: source }); 
    } 

    // Called if something bad happens. 
    // 
    function onFail(message) { 
     alert('Failed because: ' + message); 
    } 


</script>

index.html: İşte benim kodudur.

kaynak

2016-03-31 user5740661

Aldığınız hata nedir? –

hata yok sadece çalışmıyor – user5740661

'Çalışmıyor' ile ilgili daha fazla bilgi verebilir misiniz? Süreçte hangi adım işe yaramıyor? a. Klasörü bulamadın mı? b. Fotoğraf klasörden seçilemiyor mu? c. Fotoğrafı seçebiliyor ancak URI kullanılamıyor mu? d. Kullanılabilir URI doğru şekilde oluşturulmuyor mu?

Biz yukarıda cevap yanı sıra içinde bulunduğunuz hangi cihaz, OS sürümü, cordova sürümü ve iyonik sürümüne ayrıntıları temelinde size yardımcı olabilir.

varyasyonlar ve sorunların çok var Bu çalışmanın cihazlar arasında olması için işlem yapmanız gerekir. Bunu iyi yapan bazı ticari eklentiler var https://www.onymos.com/products/media

kaynak

2016-04-22 22:53:10 Nat

İyonik ve Cordova'yı kullanarak görüntüyü aygıt galerisinden nasıl yükleyebilirim?

cevap

İlgili konular