Cordova android相机插件在捕获后不显示图像

Question

我正在使用cordova 3.5，想从相机拍照并在引导模式上显示。在我的应用程序中，有一个按钮将显示引导模式并让您选择从相机或画廊拍照。选择后，您将发送到相机（如果您选择 camrea）或画廊（如果您选择画廊）。在这一步之前它工作正常。但是在我从相机拍摄或从图库中选择图像后，它没有显示任何图像。我现在不知道该怎么办..

这是我的相机和画廊代码，我写在头上

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

document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available
//
var devID;
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
    //$('#header').append("pic:" + pictureSource + " dest:" + destinationType);
}

function onPhotoDataSuccess(imageData) {
  $("#addPhotoModal").modal('hide');
    $("#checkinModal").modal('show');
  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

function onPhotoURISuccess(imageURI) {
  $("#addPhotoModal").modal('hide');
  $("#checkinModal").modal('show');
  var largeImage = document.getElementById('smallImage');
  largeImage.style.display = 'block';
  largeImage.src = imageURI;
}

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 });
}

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

function onFail(message) {
    $('#header').append("fail" + message);
  alert('Failed because: ' + message);
}

这是我在相机和画廊之间进行选择的第一个模态：

    <div class="modal fade rate-modal-box" id="addPhotoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title share-modal-title" id="myModalLabel">Add Photo</h4>
          </div>
          <div class="modal-body photo-modal-body">
            <button id="camera-btn" type="button" class="btn btn-default photo-btn">Take a Photo</button><br />
            <button id="gallery-btn" type="button" class="btn btn-default photo-btn">Photo Gallery</button>
          </div>
          <div class="modal-footer share-modal-button">
            <button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>

这是显示来自相机和图库的图像的第二个模式

<div class="modal fade rate-modal-box" id="checkinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title share-modal-title" id="myModalLabel">Check In At</h4>
      </div>
      <div class="modal-body photo-modal-body">
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <textarea class="form-control share-text-comment" id="comment-share" name="comment" placeholder="What do you want to share"></textarea>
      </div>
      <div class="modal-footer share-modal-button">
        <button id="save-checkin" type="button" class="btn btn-default share-btn">Submit</button>
        <button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

这里是调用引导模式的函数，我写在body上

function startModalPhoto(){
    $("#addPhotoModal").modal('show');
    $("#camera-btn").click(function(){
        capturePhoto();
    });
    $("#gallery-btn").click(function(){
        getPhoto(pictureSource.PHOTOLIBRARY);
    });
}

我希望你能帮我解决这个问题.. 之前谢谢..

Answer 1

对于图库图片，图片无处显示：

var largeImage = document.getElementById('largeImage');

...

<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

如果您进行更改，它会显示任何内容吗？

此外，我过去在让相机/图库图像显示在应用程序中时，使用 FILE_URI 比使用 DATA_URL 更成功。