Question

我正在使用cordova 3.5并希望从相机拍摄照片并在自举模式下显示。在我的应用程序中，有一个按钮，将显示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模式的函数，我在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更成功。

Cordova安卓摄像头插件在捕获后无法显示图像

1 个答案: