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

Question

I have an Ionic application that uses Cordova and would like to load images from the album of the device. 我有一个使用Cordova的Ionic应用程序，想从设备相册中加载图像。 My problem is that it is not working, although I did follow the instructions on the Cordova website. 我的问题是，尽管我确实按照了Cordova网站上的说明进行操作，但仍无法正常工作。 Here is my code: 这是我的代码：

index.html index.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>

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

I am using the cordova-plugin-camera to achieve this. 我正在使用cordova-plugin-camera实现此目的。

Answer 1

Can you elaborate more on 'just not working'. 您能否详细说明“只是不起作用”。 Which step in the process does it stop working? 该过程中哪一步停止工作？ a. 一种。 Not finding the folder? 找不到文件夹？ b. b。 Unable to select the Photo from the folder? 无法从文件夹中选择照片？ c. C。 Able to select the Photo but the URI is unavailable? 可以选择照片但URI不可用？ d. d。 Available URI does not render correctly? 可用的URI无法正确呈现？

We might be able to help you based on your answer to the above as well as details on which device, OS version, cordova version, and ionic version you are in. 我们可能会根据您对以上内容的回答以及您所使用的设备，操作系统版本，cordova版本和ionic版本的详细信息为您提供帮助。

There are lots of variations and issues you need to handle to have this work across devices. 您需要处理很多变体和问题，才能在各种设备上进行这项工作。 There are some commercial plugins that do this well like https://www.onymos.com/products/media 有一些商业插件可以很好地做到这一点，例如https://www.onymos.com/products/media

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

问题描述

1 个解决方案

解决方案1
0 2016-04-22 22:53:10

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

问题描述

1 个解决方案

解决方案1 0 2016-04-22 22:53:10

解决方案1
0 2016-04-22 22:53:10