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>

这是调用bootstrap模式的函数，我将其写在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成功得多。