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

Question

我正在使用 cordova 3.5，想要从相机拍照并在 Bootstrap 模式上显示它。在我的应用程序中，有一个按钮将显示 Bootstrap 模式，并让您选择从相机或图库拍照。选择后，您将发送到相机(如果您选择 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 模式的函数，我把它写在正文上

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 取得了更大的成功。