如何使用Ionic和Cordova从设备库加载图像?

时间:2016-03-31 16:38:09

标签: android cordova ionic-framework

我有一个使用Cordova的Ionic应用程序,并希望从设备的相册中加载图像。我的问题是它无法正常工作,尽管我确实遵循了Cordova网站上的说明。这是我的代码:

的index.html

user_input = raw_input('Enter Y ')

loadImage.html

<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>

我正在使用<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> 来实现此目标。

1 个答案:

答案 0 :(得分:0)

你能详细说明'只是不工作'。该过程中的哪一步停止工作? 一个。找不到文件夹? 湾无法从文件夹中选择照片? C。能够选择照片,但URI不可用? d。可用的URI无法正确呈现?

我们可能会根据您对上述内容的回答以及您所使用的设备,操作系统版本,Cordova版本和离子版本的详细信息为您提供帮助。

您需要处理许多变体和问题才能在设备之间实现此功能。有一些商业插件可以像https://www.onymos.com/products/media

那样做得很好